BFC的定义
BFC的官方定义之自我理解：符合条件的元素（标签）会为其内容（也就是子元素）建立新的 block formatting contexts（块格式化情景/块格式化上下文/块格式化布局）。
需要符合的条件是（满足其一即可）：
- 浮动元素
- 绝对定位元素
- 不是块框的块容器（如inline-block）
- overflow！=visible的block boxs
这里我更倾向于将BFC类比为Android中的纵向线性布局，即对子元素的布局方式。
BFC的布局方式
BFC对其子元素的布局方式是：
- 纵向
- 从上往下
- 一个挨着一个
- 纵向间子元素的距离由margin属性确定
- 纵向相邻子元素之间的margin值会发生collapsing-margins
- 子元素紧靠左边（对于right-to-left的布局，则是紧靠右边），即使存在float的元素也是如此（哪怕与float子元素发生重叠）
- 计算BFC的高度时，浮动元素也参与计算
- BFC的区域不会与float的元素区域重叠
三个常见问题及解决方案
- 高度塌陷：由于子元素浮动，无标准流中的元素撑起高度，而导致的父元素高度为0的问题。
方案：父元素变身为BFC即可（计算BFC的高度时，浮动元素也参与计算） - 子div设置margintop，外层div（直系父div）应用该margintop的问题。
方案：规避margin collapsing即可，设置外层div的padding以达到相同的目的。 - 浮动元素遮挡标准流中的元素的问题。
方案1：被遮挡的元素使用clear属性。
方案2：被遮挡的元素变身为BFC即可。
