BFC

BFC——“块级格式化上下文”，是指一个独立的渲染区域。

一、BFC布局规则：

（1）垂直方向，一个接一个地放置；

（2）Box的垂直方向由margin决定；

（3）BFC的区域不会与float box重叠；

（4）BFC是一个独立的区域；

（5）计算BFC高度时，浮动元素也参与计算。

二、触发BFC的条件：

（1）根元素（html）；

（2）float属性不为none；

（3）position为absolute或fixed；

（4）display为inline-block,table-cell,table-caption,flex,inline-flex;

（5）overflow不为visible。

三、BFC的作用：

（1）自适应两栏布局；

（2）清除自己受内部浮动的影响；

（3）防止margin上下重叠。