什么是BFC？
BFC 全称为 块格式化上下文 (Block Formatting Context) 。
BFC 特性(功能)
使 BFC 内部浮动元素不会到处乱跑；
产生bfc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width: 600px; border:5px solid blue;" >
<div style="width: 200px;height: 500px;background-color: yellow; float: left;">
</div>
</div>
</body>
</html>
如果我给里面的元素一个 float 或者绝对定位，它就会脱离普通文档流中。
position的值不是static或者relative
相对定位
<div style="width: 600px; border:5px solid blue; position:absolute;" >
<div style="width: 200px;height: 500px;background-color: yellow; float: left;">
</div>
</div>
inline-block
<div style="width: 600px; border:5px solid blue;display: inline-block;" >
<div style="width: 200px;height: 500px;background-color: yellow; float: left;">
</div>
</div>
over-hidden
<div style="width: 600px; border:5px solid blue;display: inline-block; overflow:hidden;" >
<div style="width: 200px;height: 500px;background-color: yellow; float: left;">
</div>
</div>
回归等高布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
section{
float: left;
/* overflow: hidden; */
}
.left{
padding-bottom:2000000px ;
margin-bottom:-2000000px ;
}
.right{
}
</style>
</head>
<body>
<section style="width: 800px; border:15px solid green;">
<span class="left" style="width: 200px; display: inline-block; float: left; background-color: greenyellow;">行内元素水平排列，直到当
行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，，块级元素则会被渲染为完整的一个新行，除非另外指定，块级元素则会被渲染为完整的一个新行，除非另外指定，块级元素则会被渲染为完整的一个新行，除非另外指定，块级元素则会被渲染为完整的一个新行，除非另外指定，块级元素则会被渲染为完整的一个新行，除非另外指定，块级元素则会被渲染为完整的一个新行，除非另外指定，块级元素则会被渲染为完整的一个新行，除非另外指定
否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定</span>
<span class = "right"style="width: 300px; display: inline-block; float: left;background-color: pink;">在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定 从效果上看，因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px，而不是 200px。 首先这不是 CSS 的 bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。从效果上看，因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px，而不是 200px。 首先这不是 CSS 的 bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。从效果上看，因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px，而不是 200px。 首先这不是 CSS 的 bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。从效果上看，因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px，而不是 200px。 首先这不是 CSS 的 bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。从效果上看，因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px，而不是 200px。 首先这不是 CSS 的 bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。</span>
</section>
</body>
</html>
加了padding 父级边框也被撑下去
加上 margin-bottom:-2000000px ;
触发bfc 限制内容
