此页内容

约 495 字大约 2 分钟

2022-04-13

提问

  • 什么是 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可以阻止元素被浮动元素覆盖。