前端常说的BFC简单说明

BFC概念

“块级格式上下文”，他是一个独立的渲染区域，只有block-level box参与，他规定了内部的block-level box如何布局，并且与区域外部毫不相干。

BFC布局规则

1.内部的box会垂直方向一个接一个的放置。

2.Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠。（默认按照两者中最大的margin值设置）
图示：

3.每个元素的margin box的左边与包含块的border box左边相接触。
图示：

4.BOX BFC区域不会与float box重叠。

5.BFC就是页面上一个隔离的独立容器，里面子元素不会影响到外面的元素。

6.计算BFC高度的时候，浮动元素也参与计算。
说明：比如父元素在不设高度的情况，用子元素去撑起父元素的高度，此时（浮动）子元素高度和父元素相当。