BFC是CSS中一个看不见的盒子，（先理解CSS的盒子模型）。它的页面渲染方式与普通流的盒子模型不同，它决定了其子元素将如何定位（所用属于BFC的box 都默认左对齐），以及和其他元素的关系和相互作用 。如何才能形成BFC盒模型呢？
1.float 属性值不为none；
2.position 属性值不为 static 和 relative；
3.display 属性为：table-cell || table-caption || inline-block || flex || inline-flex；
4.overflow 属性不为 visible。
产生BFC比较好的方式是overflow ： hidden。
那BFC盒模型有什么作用呢？
1.解决Margin Collapse
普通流以及在BFC盒子中的box 都会有Margin Collapse 问题。那么什么是Margin Collapse 呢？即上下垂直排列的两个box之间的Margin值，并不是两个box的Margin值的叠加，而是按照如下规则：<1>当两个Margin值都为正或者负值时，Margin Value = (|Margin1|>=|Margin2|? Margin1 , Margin2）<2> 当一个值为正，一个值为负时Margin Value = Margin1 + Margin2。如何解决? 两个不同的BFC块则没有Margin Collapse 问题。
2.解决float带来的父级元素坍塌的问题， 将float元素的父元素定义为BFC盒模型。
3.形成如Figure 2 所示的布局，将文字块包裹在BFC盒模型中。
.