提问

• 什么是 BFC ?
• 如何创建 BFC ?
• BFC 有什么作用 ？

什么是 BFC

BFC, Block Formatting Context。是 W3C CSS2.1 规范中的一个概念。 是页面中的一块块级渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和作用。

具有 BFC 特性的元素，可以看做是一个被隔离了的独立容器，容器内的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

创建 BFC 的方式

1. 根元素（html）
2. 浮动元素，即 float 值不为 none。
3. 绝对定位元素， 元素的 position 为 absolute 或者 fixed
4. 行内块元素， 元素的 display 为 inline-block
5. 表格单元格， 元素的 display 为 table-cell。 （HTML 表格单元格默认为该值）
6. 表格标题， 元素的 display 为 table-caption。 （HTML 表格标题默认为该值）
7. 匿名表格单元格元素， 元素的 display 为 table、table-row、table-row-group、 table-header-group、table-footer-group 。 （分别是 HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table。
8. overflow 计算值不为 visible 的块元素
9. display 值为 flow-root 的元素
10. contain 值为 layout、content、paint 的元素
11. 弹性元素，display 为 flex、inline-flex 元素的直接子元素
12. 网格元素， display 为 gird、inline-gird 元素的直接子元素
13. 多列容器，元素的 column-count 或 column-width 不为 auto， 包括 column-count 不为 1
14. colum-span 为 all 的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中。

作用

1. 同一个 BFC 的外边距会发生折叠（合并）， 通过将其放在不同的 BFC 中规避折叠。
2. BFC 可以包含浮动元素，即清除浮动。
3. BFC 可以阻止元素被浮动元素覆盖。