BFC

BFC是一个渲染区域，有自己单独的渲染规则。有5种情况会触发BFC:

1.根元素

2.浮动元素

3.定位不为relative和static

4.display:inline-block, table-cell, table-caption, flex, inline-flex

5.overflow不为visible

BFC的规则如下:

0.块级box会在垂直方向一个接一个的放置

1.内部的块级box在垂直方向会发生边距合并现象，具体细节待总结（可用来解决边距合并）

2.每个元素的margin-left的左边都与包含块接触。通常的包含块都为content-box（float元素也是），但absolute的包含块则为最近的relative或absolute或fix元素的padding-box

3.BFC区域和float不会重叠（两栏布局）

4.计算高度时，浮动元素也参与计算（浮动高度塌陷的解决办法之一）