概念

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

创建 BFC 的条件

满足以下条件之一即可：

根元素（html）
float 不是 none
绝对定位元素（position 为 absolute 或 fixed）
overflow 值不为 visible 的块元素
display 为 inline-block, table 相关, flow-root 的元素
contain 值为 layout, content, paint 的元素
弹性元素（display 为 flex, inline-flex 的元素的直接子元素）
网格元素（display 为 grid, inline-grid 的元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto）
column-span 为 all

特性

BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。

应用

防止外边距塌陷

同一个 BFC 下的元素会产生外边距塌陷，只要元素属于不同的 BFC 就能防止塌陷：

<div>
  <div style="width: 100px; height: 100px; border: 1px solid red; margin-bottom: 10px;"></div>
  <div style="width: 100px; height: 100px; border: 1px solid red; margin-top: 10px;"></div>
</div>

把其中一个 div 放入新创建的 BFC 中：

<div>
  <div style="overflow: hidden;">
    <div style="width: 100px; height: 100px; border: 1px solid red; margin-bottom: 10px;"></div>
  </div>
  <div style="width: 100px; height: 100px; border: 1px solid red; margin-top: 10px;"></div>
</div>

清除浮动

根据 BFC 的特性， BFC 的高度是把内部浮动的元素也计算进去的，因此本来内部元素浮动导致高度塌陷的问题，就可以用创建 BFC 的方式解决：

<div style="border: 1px solid blue;">
  <div style="width: 100px; height: 100px; border: 1px solid red; float: left;"></div style="width: 100px; height: 100px; border: 1px solid red; margin-top: 10px;">
</div>

让容器成为一个 BFC ：

<div style="border: 1px solid blue; display: flow-root;">
  <div style="width: 100px; height: 100px; border: 1px solid red; float: left;"></div style="width: 100px; height: 100px; border: 1px solid red; margin-top: 10px;">
</div>

实现两栏布局

<div style="overflow: hidden; border: 1px solid red;">
  <div style="float: left; margin-right: 10px; width: 100px; height: 100px; border: 1px solid green;">
    侧边栏
  </div>
  <div style="height: 100px; overflow: hidden; border: 1px solid blue;">
    main
  </div>
</div>

ChuChencheng / note

CSS BFC #20

概念

创建 BFC 的条件

特性

应用

防止外边距塌陷

清除浮动

实现两栏布局

参考