什么是 BFC，用来解决什么？

BFC（块格式化上下文）是一块独立的布局区域：里面的布局不影响外面，外面的浮动也冲不进来。面试里用它解释三件事：挡住垂直 margin 折叠、包住浮动子元素、让文字或盒子躲开浮动。

原理

常见的触发方式：

根元素
float 不是 none
position 为 absolute 或 fixed
display: inline-block、table-cell、table-caption、flow-root
overflow 不是 visible（例如 hidden、auto）
display: flex 或 grid 的容器本身也会成为独立格式化上下文

display: flow-root 就是为了创建 BFC，没有 overflow: hidden 可能裁切内容的副作用。

浮动元素脱离普通流，父元素如果只剩浮动子元素，高度会塌成 0。父元素成为 BFC 之后，计算高度时要把浮动子元素算进去。

普通块会被旁边的浮动重叠。BFC 的区域不会和浮动重叠，所以早期的两栏可以用「一侧浮动，另一侧 overflow: hidden」来躲开。现在两栏直接用 flex 或 grid。

追问

清除浮动还有哪些办法？

父元素 flow-root，或者在浮动元素后面放一个 clear: both 的块。::after { content: ""; display: block; clear: both; } 是旧代码里常见的写法。新布局优先 flex/grid，从源头不依赖浮动。

overflow: hidden 为什么偶尔能「修好」布局？

因为它顺带创建了 BFC。真正的目的如果是包住浮动或阻止 margin 折叠，写成 flow-root 更明确。

易错点

BFC 不是「清除浮动」的专有名字。清除浮动只是它的一个结果。
flex 容器里的对齐规则是 flex 格式化上下文，不要全用 BFC 的块方向规则去套。
创建 BFC 不会让绝对定位的子元素回到文档流。

相关