了解BFC之前先了解一下普通流的概念
元素按照在HTML中的位置至上而下的顺序进行布局，行内元素水平排列，直到行内被占满后换行，块级元素则会渲染成一个新行
通俗来说可以把BFC理解成一个封闭的箱子，箱子内部的元素无论如何变化，都不会影响到箱子外部
1.上下边距的堆叠 举个栗子
<head> div{ width: 100px; height: 100px; background: lightblue; margin: 100px; } </head> <body> <div></div> <div></div> </body>两个div都处于同一个BFC容器下，所以第一个div的下边距与第二个div的上边距发生了堆叠，两个div的margin距离只有100px而不是我们想要的200px
如果想要避免这种情况，可以将两个div放到不同的BFC容器中
<div class="container"> <div></div> </div> <div class="container"> <div></div> </div>2.BFC清除浮动 首相要明确一个定义
浮动的元素都会脱离普通的文档流
举个栗子
<div style="border: 1px solid #000;"> <div style="width: 100px;height: 100px;background: #eee;float: left;"></div> </div>div产生的浮动，所以容器只剩下2px的高度，这时如果我们触发容器的BFC特性，容器则会继续包裹着浮动元素
<div style="border: 1px solid #000;overflow: hidden"> <div style="width: 100px;height: 100px;background: #eee;float: left;"></div> </div>3.BFC防止遮盖
<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div> <div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动, 也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>第二个元素部分被浮动元素所遮盖，想避免这种情况，可以触发第二个元素的BFC特性，加入overflow：hidden 文章参考： 链接：https://zhuanlan.zhihu.com/p/25321647
