在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流和普通流三种
block formatting context，也就是块级格式化上下文
BFC的通俗理解：
首先BFC是一个名词，是一个独立的布局环境，BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
满足下列条件之一就可触发BFC
【1】根元素，即HTML元素
【2】float的值不为none
【3】overflow的值不为visible
【4】display的值为inline-block、table-cell、table-caption
【5】position的值为absolute或fixed
应用：
【1】可以阻止元素被（同级）浮动元素覆盖
【2】可以包含浮动元素
【3】属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠。所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠
