什么是BFC
BF（即 Block Formatting Context）是W3C CSS2.1规范中的一个概念。 是页面中的一块渲染区域，并且有一套渲染规则，它决定了子元素将如何定位，以及和其它元素的关系和相互作用。
BFC的特性
1. 在同一个BFC区域，子元素的上下边距（margin）会发生折叠
2. BFC可以避免元素被浮动元素覆盖
BFC触发条件
1. 根元素
2. float值不为none
3. overflow值不为visible
4. display值为inline-block，table-cel，table-caption
5. position值为absolute或fixed
BFC的作用
1. 自适应两栏布局
2. 避免元素被浮动元素覆盖
3. 可以清除内部浮动，包含浮动元素高度，避免高度塌陷
4. 阻止margin重叠
