BFC 区块格式化上下文

常规流，块盒

1.水平方向上，撑满整个包含块宽度，垂直方向上，依次摆放

2.垂直方向上相邻元素，margin会合并

3.父子关系的情况下，可能会产生margin塌陷

4.父子关系的情况下，父元素无视浮动元素会产生高度坍塌

5.兄弟关系的情况下，正常元素可能会被浮动元素覆盖（正常元素在浮动元素之后）

BFC 区块格式化上下文（Block Formatting Context）

1.开启BFC的区域，是一块独立的渲染区域

2.隔绝了内部与外部的联系，内部渲染不会影响到外部

3.当然，不同的BFC区域，渲染时也互不干扰

开启BFC能解决什么问题？

1.开启BFC，其子元素不会再产生margin塌陷问题（不会和他的子元素产生margin合并）

2.开启BFC，就算子元素浮动，自身高度也不会坍塌（高度计算不再无视浮动元素）

3.开启BFC，自己不会被其他浮动元素所覆盖（不会与浮动元素重叠，会避开浮动元素排布）

如何开启BFC?

0.根元素（HTML）

1.设置float属性

2.设置position属性（属性值需要是absolute或者fixed）

3.设置overflow属性（属性值不为visible即可）

4.行内块元素（inline-block）

5.设置display为flow-root的元素

6.伸缩项目（flex盒子内的item）

7.多列容器（设置column-count）

8.表格元素（table thead tfoot tr th td caption）

9.column-span为all的元素（表格第一行横跨所有列）