链接

BFC可以理解为了一个区域，其中有规定块状盒子该如何布局，浮动元素将如何和其他元素打交道。

下面至少一个方法就能创建一个BFC

  1. 根元素
  2. 浮动（float属性值不是none）
  3. 绝对定位元素（position是absolute或者fixed）
  4. 设置为inline-block的元素（display: inline-block）
  5. table cells（HTML table cells或者是display: table-cell）
  6. table caption（HTML table captions 或者是display: table-caption）
  7. 通过display:设置值为table或者table-row或者table-row-group或者table-header-group或者table-footer-group或者inline-table（对于HTML的tables, table row, table bodies, table headers 以及 table footers 默认就会创建）——隐式创建的table-cell
  8. 块状元素的overflow属性值设置为非visible
  9. 设置display: flow-root
  10. 元素被设置为contain:layout或者content或者strict
  11. flex items（被设置为display: flex 或者 inline-flext的元素的 直接子元素）
  12. grid items（被设置为display: grid 或者 inline-grid的元素的 直接子元素）
  13. 多列容器（元素被设为column-count或者column-width不为auto）——这个听都没听过…
  14. column-span:all永远都会创建一个新的BFC —— 没听过…

如果一个元素创建了一个BFC，那么这个元素的一切子元素都位于这个BFC中。

只有位于同一个BFC中的元素，对它们使用布局或者清除浮动或者边距坍塌规则才会起作用。

例子已在上一篇中有写。

下面看浮动、清除浮动、flow-layout-and-writing-modes、visual-formatting-model以及css-box-model五篇。

ps.感觉mdn上关于css的文章没有什么顺序诶…有点乱…