理解css的BFC

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盒模型中。

.