BFC

在解释BFC以前，先说一下文档流。常说的文档流分为定位流、浮动流和普通流三种。而普通流其实就是BFC中的FC （formatting context）
直译过来就是格式化上下文。它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其余元素之间的关系和做用。
常见的FC有BFC和IFC

触发条件
- 根元素
- float不为none
- overflow不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute或fixed

做用
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。它和普通的块级元素框有不一样之处：

1. 能够阻止元素被浮动元素覆盖
2. 能够包含浮动元素
3. 属于同一BFC的两个相邻块级子元素的上下margin会发生重叠，（设置writing-mode：tb-r时，水平margin会发生重叠）。因此两个相邻块级子元素分属于不一样的BFC时能够组织margin重叠