BFC的定义与作用

BFC的定义

BFC即Block Formatting Context，与之相对的还有IFC（Inline Formatting Context）

BFC：属性为block，list-item，table的元素

BFC布局规则

1. 属于同一个BFC的两个相邻Box的垂直margin会发生重叠

2. BFC区域不会与float box重叠

3. 计算BFC高度，会把浮动元素也记录在内

4. BFC是一个独立容器，内部布局不影响外部，外部也不影响内部

如何开启BFC

1. float

2. 开启定位且不为static或relative

3. display的值为inline-block、table-cell、flex、inline-flex或table-caption

4. overflow的值不为visible

BFC的作用

1. 避免垂直margin重叠

2. 清除浮动（BFC布局规则第三条）

3. 不被浮动元素所覆盖（BFC布局第二条）