一、简介

BFC 全称是 Block Formatting Context，中文名字叫块格式化上下文，是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

这是 MDN 的说法，听一听，这是人话嘛。所以，我又找了一篇通俗的说法，方便简单理解这句话，bfc就是一个盒子，里面的子元素不论发生什么，都不会影响到外面，跟龙珠的魔封波一样。

二、哪些方法会创建 BFC

这里简单记一下哪些方式会创建块格式化上下文。

  • 根元素()
  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块元素（元素的 display 为 inline-block）
  • 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
  • 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
  • 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
  • overflow 值不为 visible 的块元素
  • display 值为 flow-root 的元素
  • contain 值为 layout、content或 paint 的元素
  • 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
  • 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
  • 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
  • column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

三、BFC 的特点

  1. BFC 可以包住浮动元素
  2. BFC 与兄弟元素划清界限

四、参看资料

  1. MDN
  2. 浅谈 BFC

「@浪里淘沙的小法师」