定义
在解释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-aption
【5】position的值为absolute或fixed
作用
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。它与普通的块框类似，但不同之处在于:
【1】可以阻止元素被浮动元素覆盖
【2】可以包含浮动元素
我们可以利用BFC的第2条特性来“清浮动”，这里其实说清浮动已经不再合适，应该说包含浮动。也就是说只要父容器形成BFC就可以
更多方法：清除float影响
【3】两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠
overflow特殊：
1.root元素上的overflow属性置于viewport上
2.overflow扩散行为：当root元素是html元素且overflow为visible，而且html元素有body作为其子元素，UA则需要将第一个body之上的overflow属性应用于视口；
用于视口的overflow：将被解析为visible
例子：
1.给body加上overflow:hidden，无法触发BFC创建。
解释：本用例中body {overflow:hidden} html {overflow: visible}（html为默认overflow），body的overflow:hidden被应用于视口，body的最终使用值为overflow:visible，因此body没有创建BFC。
2.给body和html同时加上overflow:hidden，成功触发BFC创建。
解释：本用例中body, html{overflow:hidden}，html的overflow:hidden被用于视口，body的overflow计算值是hidden，因此创建了BFC。
