CSS BFC（块级格式化上下文）

1. 创建一个BFC,一个BFC可以被显式的触发。如果想要创建一个新的BFC，只需要给它添加下面提到的任何一个CSS样式就可以了。
   
   • float的值不为none
   • position的值不为static或者relative
   • display的值为 table-cell, table-caption, inline-block, flex, inline-flex中的其中一个
   • overflow的值不为visible

2. 外边距折叠
   在常规文档流中，盒子都是从包含块的顶部开始一个接着一个垂直堆放。两个兄弟盒子之间的垂直距离是由他们个体的外边距所决定的，但不是他们的两个外边距之和，取两个外边距较大的那个值作为最终的外边距。
   垂直方向的外边距折叠只有这两个元素在同一个BFC中时才会发生,所以为了阻止外边距折叠，我们可以给兄弟元素添加某个属性让其生成一个新的BFC

3. 清除浮动
   子元素浮动，给父元素添加属性让其生成新的BFC，清除浮动

4. BFC防止文字环绕

5. 多列布局中使用BFC
   参考：http://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html