BFC

BFC的定义

BFC的官方定义之自我理解：符合条件的元素（标签）会为其内容（也就是子元素）建立新的 block formatting contexts（块格式化情景/块格式化上下文/块格式化布局）。
需要符合的条件是（满足其一即可）：

• 浮动元素
• 绝对定位元素
• 不是块框的块容器（如inline-block）
• overflow！=visible的block boxs

这里我更倾向于将BFC类比为Android中的纵向线性布局，即对子元素的布局方式。

BFC的布局方式

BFC对其子元素的布局方式是：

1. 纵向
2. 从上往下
3. 一个挨着一个
4. 纵向间子元素的距离由margin属性确定
5. 纵向相邻子元素之间的margin值会发生collapsing-margins
6. 子元素紧靠左边（对于right-to-left的布局，则是紧靠右边），即使存在float的元素也是如此（哪怕与float子元素发生重叠）
7. 计算BFC的高度时，浮动元素也参与计算
8. BFC的区域不会与float的元素区域重叠

三个常见问题及解决方案

1. 高度塌陷：由于子元素浮动，无标准流中的元素撑起高度，而导致的父元素高度为0的问题。
   方案：父元素变身为BFC即可（计算BFC的高度时，浮动元素也参与计算）
2. 子div设置margintop，外层div（直系父div）应用该margintop的问题。
   方案：规避margin collapsing即可，设置外层div的padding以达到相同的目的。
3. 浮动元素遮挡标准流中的元素的问题。
   方案1：被遮挡的元素使用clear属性。
   方案2：被遮挡的元素变身为BFC即可。

参见

MDN-视觉格式化模型
MDN-BFC
BFC原理剖析
学习BFC
CSS之BFC详解