前端知识库谈谈你对 BFC 的理解
BFC (Block Formatting Context) 是 CSS 中一个非常重要但容易被忽视的概念。面试中考察 BFC，主要是想了解候选人是否理解 CSS 的渲染机制，以及能否利用 BFC 解决实际布局问题。
谈谈你对 BFC 的理解
问题解析
BFC (Block Formatting Context) 是 CSS 中一个非常重要但容易被忽视的概念。面试中考察 BFC，主要是想了解候选人是否理解 CSS 的渲染机制，以及能否利用 BFC 解决实际布局问题。
核心概念
什么是 BFC
BFC (Block Formatting Context)，即块级格式化上下文，是页面中的一块独立的渲染区域，有一套属于自己的渲染规则：
- 内部的盒子会在垂直方向上一个接一个放置
- 同一个 BFC 内相邻块的垂直 margin 在满足折叠条件时会重叠，不是任意盒子都折叠
- 每个元素的左外边距与包含块的左边界相接触
- BFC 的区域不会与 float 的元素区域重叠
- 计算 BFC 高度时，浮动子元素也参与计算
- BFC 将内部浮动和部分 margin 折叠关系与外部隔开，但容器尺寸变化仍会影响外部布局
BFC 的本质
BFC 是块级布局规则的边界，不是尺寸、绘制或性能上的完全隔离；也不是 contain 的替代品。
触发条件
创建 BFC 的方式有很多：
| 方式 | 属性值 |
|---|---|
| 根元素 | <html> |
| 浮动元素 | float: left / right |
| overflow | overflow: auto / scroll / hidden |
| display | flow-root / inline-block / table-cell / table-caption |
| position | absolute / fixed |
最常用的是 overflow: hidden 和 display: flow-root (现代浏览器推荐)。
overflow: clip 单独使用不建立 BFC；需要裁剪且建立 BFC 时可另加 display: flow-root。Flex/Grid 容器建立的是 flex/grid 格式化上下文，不能直接称为 BFC；它们也能让子项外边距不折叠，但所用布局规则不同。
应用场景与解决方案
1. 清除浮动（解决高度塌陷）
问题：父元素包含浮动子元素时，高度会塌陷为 0
.par {
overflow: hidden; /* 触发 BFC，计算高度时包含浮动子元素 */
}
.child {
float: left;
}
2. 防止 margin 重叠
问题：正常块流中，满足折叠条件的相邻垂直外边距会合并；水平方向、浮动/绝对定位元素以及 Flex/Grid 项的外边距不按此规则折叠。
<p style="margin: 100px 0;">Haha</p>
<p style="margin: 100px 0;">Hehe</p> <!-- 相邻间距为 100px，而非 200px -->
解决方案：将其中一个元素包裹在 BFC 容器中
<p>Haha</p>
<div style="overflow: hidden;">
<p>Hehe</p> <!-- 不同的 BFC，margin 不再重叠 -->
</div>
折叠结果不是始终取最大值。对一组参与折叠的 margin，取最大的正值（没有则为 0）加上最小的负值（没有则为 0）：20px 与 30px 得 30px，20px 与 -8px 得 12px，-10px 与 -20px 得 -20px。负 margin 会影响最终间距，但不是阻止折叠的通用办法。
还要区分父子与兄弟：父元素创建 BFC，可以阻止它与正常流子元素的 margin 折叠；同一个 BFC 内满足条件的相邻兄弟仍可能折叠。若要隔开两兄弟，可让其中一个被新的 BFC 容器包裹，或让父容器采用 Flex/Grid 并用 gap。父子边界的 border/padding、行内内容等会改变折叠条件；给父容器加边框并不能自动取消其内部两个兄弟之间的折叠。
3. 自适应多栏布局
问题：浮动元素会遮挡普通文档流元素
.aside {
float: left;
width: 100px;
}
.main {
overflow: hidden; /* 触发 BFC，不会与浮动元素重叠 */
}
深入理解
BFC 与 hasLayout
在 IE 浏览器中，没有 BFC 的概念，但有类似的 hasLayout 机制。zoom: 1 或 display: inline-block 可以触发 hasLayout，这也是旧时代清除浮动的兼容方案。
BFC 与层叠上下文
BFC 和层叠上下文 (Stacking Context) 是不同的概念：
- BFC：影响的是块级布局，解决浮动、margin 重叠等问题
- 层叠上下文：影响的是元素在 z 轴上的层叠顺序
某些条件可以同时触发两者，但 position: absolute 单独并不保证创建层叠上下文，通常还需要非 auto 的 z-index；不能从建立 BFC 推导出新的层叠上下文。
现代替代方案
虽然 BFC 很有用，但现代 CSS 提供了更优雅的解决方案：
| 场景 | BFC 方案 | 现代方案 |
|---|---|---|
| 清除浮动 | overflow: hidden |
display: flow-root |
| 两栏布局 | BFC + float | Flexbox / Grid |
| margin 重叠 | 包裹 BFC 容器 | 使用 Flexbox 布局 |
最佳实践
/* 现代清除浮动推荐方案 */
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* 或者使用 flow-root (IE 不支持) */
.bfc-container {
display: flow-root;
}