BFC(Block Formating Context)介绍

在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。FC是formatting context的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC，还有GFC和FFC。BFC是block formatting context，也就是块级格式化上下文，是用于布局块级盒子的一块渲染区域。

触发BFC的条件：

1. 根元素，即HTML元素
2. float的值不为none
3. overflow的值不为visible
4. display的值为inline-block、table-cell、table-caption
5. position的值为absolute或fixed

BFC的特点：

1. 不被浮动元素覆盖。应用：两列布局，一列固定宽度，一列自适应
2. 可以包含浮动元素。应用：清除浮动影响
3. margin collapse。同一个BFC中的元素会发生margin折叠。不同的BFC之间不发生margin折叠。
4. 消除文本环绕

参考链接：
https://juejin.im/post/5909db2fda2f60005d2093db#heading-23
https://www.jianshu.com/p/fc1d61dace7b
http://www.cnblogs.com/xiaohuochai/p/5248536.html