BFC 定义

块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视化 CSS 渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

BFC 是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个 BFC 中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

布局规则

  • 内部的 Box 会在垂直方向，一个接一个地放置。
  • Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠 每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  • BFC 的区域不会与 float box 重叠。
  • BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算 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 或 strict 的元素
  • 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
  • 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
  • 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
  • column-span 为 all 的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）

创建了块格式化上下文的元素中的所有内容都会被包含到该 BFC 中

BFC 的用法

快格式化上下文其实在开发中会使用到，例如子元素定义 float 属性父级元素的高度不会撑开，我们会在父级元素添加overflow:hidden来解决这个问题，就是利用上面布局规则的最后一条来实现的。又如margin 合并规则，多列布局，图片文字环绕等等，都可以用 bfc 来解决，具体看下面例子

display: flow-root

在创建 BFC 里有一个 display:flow-root，具体解释可以看flow-root

The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents.

可以通过此属性创建一个 bfc，应该用此新的属性来解决上面的问题，很简单，但是浏览器还不全支持，可以通过@supports 来实现降级处理，让支持的浏览器使用上这个属性，实现方法如下

.container {
  border: 1px solid red;
  /* 生成bfc的方法 */
  overflow: auto;
}
.f-el {
  float: left;
  width: 200px;
  height: 200px;
  background: #333;
}
@supports (display: flow-root) {
  .container {
    /* 生成bfc新的方法 */
    display: flow-root;
  }
}