CSS 里的"结界"：BFC 与层叠上下文的渲染隔离逻辑

在写 CSS 的过程中，你可能遇到过这样的困惑：明明没动什么，一个浮动元素突然撑开了父容器；或者费尽心思调 z-index，元素就是不按预期叠放。背后大概率涉及两个概念：BFC（Block Formatting Context，块级格式化上下文） 和 层叠上下文（Stacking Context） 。

这篇文章是我整理这两块知识的笔记。它们看似是两个独立的"规则"，但我理解下来，其实都指向同一件事——浏览器在渲染时划定的"隔离结界" 。只是一个管的是盒子的布局，另一个管的是图层的叠放。

---

BFC 是什么，为什么需要它？

BFC 的官方定义很抽象：它是一个独立的渲染区域，内部的盒子按照特定规则排列，且与外部互不影响。

我更喜欢把它理解成：一个布局上的"隔离容器" 。

浏览器在做普通流布局时，float、margin 折叠等行为会在相邻元素之间"渗透"。BFC 的存在，就是划一道边界，宣告：边界内的布局由我自己管，外面的事不干涉进来。

BFC 的触发条件

以下属性会触发 BFC（部分常用条件）：

/* 场景：浮动元素 */
.parent {
  overflow: hidden; /* 经典触发方式 */
}

/* 或者使用 display: flow-root（语义更明确，现代写法） */
.parent {
  display: flow-root;
}

/* 其他触发方式 */
.container {
  float: left;       /* 浮动元素本身也是 BFC */
  position: absolute;
  position: fixed;
  display: flex;
  display: grid;
  display: inline-block;
  overflow: auto;
  overflow: scroll;
}

BFC 能解决的三类经典问题

① 清除浮动（高度塌陷）

<!-- 问题：子元素全部浮动，父容器高度为 0 -->
<div class="parent">
  <div class="float-child">浮动子元素</div>
</div>

/* 浮动子元素脱离文档流，父容器感知不到它的高度 */
.float-child {
  float: left;
  height: 100px;
}

/* 触发父容器的 BFC，让它"负责"包含浮动子元素 */
.parent {
  overflow: hidden; /* 高度塌陷解决了 */
}

BFC 有一条规则：BFC 在计算高度时，需要包含内部的浮动元素。所以触发 BFC 之后，父容器就能撑开了。

② 阻止 margin 折叠

/* 普通流中，相邻兄弟元素的 margin 会合并（取较大值） */
.box-a { margin-bottom: 20px; }
.box-b { margin-top: 30px; }
/* 实际间距是 30px，而不是 50px */

/* 如果想阻止折叠，可以给其中一个元素套一个 BFC 容器 */
.wrapper {
  overflow: hidden; /* 触发 BFC */
}
/* 现在 .box-b 在 BFC 内，margin 不再与外部折叠，间距变回 50px */

BFC 内的 margin 不会与外部折叠——这是"隔离"的体现。

③ 防止浮动元素覆盖普通文本

/* 普通流元素默认会被浮动元素遮盖（虽然文字会环绕） */
.float-box { float: left; width: 100px; }
.text-box { overflow: hidden; } /* 触发 BFC，变成自适应两栏布局 */

BFC 不会与浮动元素的盒子重叠，这常用来实现不定宽的两栏布局。

---

层叠上下文是什么？

如果说 BFC 是平面布局的"结界"，那层叠上下文就是 Z 轴方向的"结界" 。

层叠上下文（Stacking Context）定义了一组元素的 z 轴叠放顺序。每个层叠上下文内部有自己的叠放规则，且整体作为一个单元参与父上下文的叠放。

层叠上下文内部，元素从下到上的叠放顺序大致如下：

（底部）
  1. 层叠上下文的背景和边框
  2. z-index 为负值的子层叠上下文
  3. 普通流中的块级元素（非浮动、非定位）
  4. 浮动元素
  5. 普通流中的行内元素
  6. z-index 为 0 或 auto 的定位元素
  7. z-index 为正值的子层叠上下文
（顶部）

z-index 的比较，只在同一个层叠上下文内才有意义。这是很多人调 z-index 调不对的根本原因。

---

为什么这些属性会触发层叠上下文？

这是我觉得最值得深挖的部分。MDN 列出了十几种触发条件，背后的逻辑是什么？

我的理解是：每一种触发条件，都对应浏览器在合成（Compositing）阶段的一个实际需求——它需要把这个元素及其子树单独处理，不能混在普通文档流里一起渲染。

逐条来看：

position: relative/absolute/fixed + z-index 不为 auto

.box {
  position: relative;
  z-index: 1; /* 触发层叠上下文 */
}

z-index: auto 表示"不参与层叠上下文的建立，z 序由父上下文决定"。一旦设置了具体数值，浏览器需要知道：这个元素内部的子元素应该以谁为参照来叠放？答案就是"以这个元素为根，建立一个新的层叠上下文"。

z-index 的比较需要一个局部坐标系，这个元素就是那个坐标系的原点。

opacity < 1

.box {
  opacity: 0.5; /* 触发层叠上下文 */
}

这一条让很多人困惑。opacity 和叠放有什么关系？

关键在于浏览器的渲染流程：应用 opacity 时，浏览器需要把这个元素及其所有子元素先合成为一张完整的位图（纹理），然后整体降低透明度，再合入父层。

如果不建立独立的层叠上下文，每个子元素单独透明，视觉效果会完全不同——重叠区域会叠加透明度，看起来就乱了。

所以 opacity 必须建立独立上下文，让子树作为整体处理。这是视觉正确性的要求，不是设计偏好。

/* 验证这一点：如果 opacity 不建立层叠上下文 */
/* 两个互相重叠的子元素，在父元素 opacity: 0.5 时 */
/* 会出现重叠区域更透明的视觉 bug */
.parent { opacity: 0.5; }
.child-a { width: 100px; height: 100px; background: red; }
.child-b { width: 100px; height: 100px; background: blue; margin-top: -50px; }
/* 浏览器正确处理：先把 parent 的子树合成为一个整体，再应用 0.5 透明度 */

transform: 任何值（除 none）

.box {
  transform: translateX(10px); /* 触发层叠上下文 */
}

transform 会触发 GPU 合成层提升（Composite Layer Promotion）。元素被提升到独立的合成层之后，GPU 可以单独对这一层做变换，不必重新触发 Layout 和 Paint。

但独立合成层有一个前提：它的内部叠放顺序必须是确定的，否则 GPU 不知道该怎么合成。因此它必须建立独立的层叠上下文。

这也解释了为什么 transform: none 不触发——没有离开普通文档流的渲染路径，不需要独立上下文。

filter: 任何值（除 none）

.box {
  filter: blur(4px); /* 触发层叠上下文 */
}

和 opacity 类似，但更极端。filter 的效果（blur、drop-shadow 等）必须基于整个子树的合成结果才能计算。

比如 blur(4px) 需要获取该元素的像素边界，对边界外也做模糊扩散——这只有先把子树渲染成一张完整纹理，才能做到。如果子元素还在和外部文档流混排，这个效果根本没办法计算。

filter 建立层叠上下文，是滤镜特效在物理上可计算的前提。

---

一个帮助理解的心智模型

可以把层叠上下文想象成 Photoshop 里的图层组：

根文档（顶层层叠上下文）
├── 普通元素（在这个组里按顺序叠放）
├── .box-a（opacity: 0.8）← 新建了一个图层组
│   ├── 子元素 1
│   └── 子元素 2
│   （子元素 2 和父上下文里的元素比 z-index 没有意义，它们在不同"组"里）
└── .box-b（z-index: 100）← 另一个图层组
    └── 子元素（z-index: 9999，也无法超过父上下文的 .box-a）

每个"图层组"内部自行排序，整体再参与上层的排序。子元素的 z-index 永远只在自己所在的"图层组"里生效。

---

面试常问版

属性	触发 BFC	触发层叠上下文
overflow: hidden/auto/scroll	✅	❌
display: flow-root	✅	❌
position: absolute/relative + z-index ≠ auto	✅（absolute/fixed）	✅
opacity < 1	❌	✅（子树需整体合成）
transform ≠ none	❌	✅（GPU 合成层提升）
filter ≠ none	❌	✅（滤镜需整体像素计算）
display: flex/grid	✅	❌（子项另说）
float ≠ none	✅（自身）	❌

面试可能追问的核心逻辑：

• BFC 的本质：布局维度的隔离，解决 float、margin 折叠的"副作用渗透"问题
• 层叠上下文的本质：合成维度的隔离，让需要独立处理的元素及其子树有确定的 z 序边界
• 为什么 opacity/transform/filter 会触发：不是 CSS 规范的"任意规定"，是浏览器渲染管线（Paint → Composite）在技术上的必然要求

---

延伸思考

研究这两个概念的过程中，我产生了一些新的疑问：

1. will-change: transform 会提前触发合成层提升，但是否同时建立层叠上下文？（答案是：会，但这个"预建立"对布局有没有副作用？）
2. 在 React 组件中，如果父组件用了 transform 做动画，子组件里的 Portal（比如 Modal）会受到层叠上下文的影响吗？（这在实际开发中是个坑）
3. 现代 CSS 的 @layer 是否引入了新的层叠维度？它和 z-index 的关系是什么？

这些问题我还在继续探索，如果你有自己的理解，欢迎交流。

---

小结

BFC 和层叠上下文，都是浏览器在渲染时建立"边界"的机制。理解它们，我觉得最重要的不是记住"哪些属性触发"，而是理解为什么要有这个边界：

• BFC：浮动和 margin 折叠在普通流里会"渗透"，需要一个容器划定范围自管布局
• 层叠上下文：opacity、transform、filter 等特效需要把子树整体处理，必须有确定的 z 序边界

记住规则可以应付面试，但理解背后的渲染逻辑，才能在遇到真实 bug 时有判断力。

参考资料

• MDN - Block formatting context - BFC 官方定义与触发条件
• MDN - Stacking context - 层叠上下文详解
• CSS Spec - Visual formatting model - W3C 视觉格式化模型规范
• Compositing and Blending Level 1 - opacity/filter 合成规范背景