BFC 的应用场景

BFC 最常见的三个用途是包含浮动、隔离外部浮动和阻止父子外边距折叠。它们都来自“内部布局在独立上下文中计算”，而不是来自某个固定 CSS 组合。

.media-object { display: flow-root; }
.media-object__text { display: flow-root; }
.section { display: flow-root; }

让文本区域建立 BFC 后，它的内容不会被外部浮动覆盖；让父容器建立 BFC 后，内部浮动会参与父元素的高度。flow-root 只解决布局上下文，不能代替清晰的结构、响应式宽度和溢出策略。

变化一个条件观察边界

把 flow-root 改成 overflow: hidden，父高度可能仍然正确，但超出边界的 tooltip 会被截掉。把子元素改成绝对定位，BFC 对它的包含关系又不再相同。每次修复都要同时检查尺寸、滚动和交互。

实验与练习

制作“图片浮动 + 文字内容 + tooltip”的媒体对象。分别用 flow-root 和 overflow: hidden 包含浮动，打开 tooltip 并调整窗口大小，记录哪种规则解决了高度问题、哪种产生了裁剪副作用。

可运行微实验：隔离布局与绘制层级

创建两个相邻容器，分别用 display: flow-root、overflow: auto、position、transform 和 z-index 改变格式化上下文。记录外边距是否折叠、浮动是否被包住、子元素 z-index 是否能越过新的 stacking context，不能只凭视觉猜测。

常见错误

• 只为通过某个截图加入 BFC，不说明布局边界。
• 用 BFC 隐藏本来应该暴露的溢出内容。
• 把所有布局问题归因于“清除浮动”。

继续阅读

布局边界之外，绘制还需要自己的边界。下一篇进入层叠上下文：层叠上下文的形成。

练习

1. 用最小输入复现“BFC 的应用场景”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案