BFC 的触发与规则
块格式化上下文（BFC）是一块独立的块级布局环境。上下文内部的浮动、外边距和块布局按自己的规则计算，外部元素不会简单地穿透它。BFC 是布局边界，不是万能的“清除浮动类”。
常见触发方式包括 display: flow-root、浮动元素、绝对定位元素、非 visible 的某些 overflow、Flex/Grid 容器的直接布局环境。现代代码优先使用语义明确的 flow-root，而不是为了副作用设置 overflow: hidden。
css
.panel { display: flow-root; }
.legacy-panel { overflow: auto; }BFC 能包含自身内部的浮动，阻止相邻块的外边距折叠，并让内容与外部浮动形成隔离。它不会自动改变子元素的宽度、让内容不溢出或创建新的绘制层；需要分开检查布局与绘制。
实验与练习
创建一个父元素和一个浮动子元素，先不设置 BFC，再分别用 flow-root、overflow: auto 和 display: flex 处理。记录父背景高度、相邻外边距和阴影裁剪的差异，说明每种方式建立了什么边界。
可运行微实验：隔离布局与绘制层级
创建两个相邻容器，分别用 display: flow-root、overflow: auto、position、transform 和 z-index 改变格式化上下文。记录外边距是否折叠、浮动是否被包住、子元素 z-index 是否能越过新的 stacking context，不能只凭视觉猜测。
常见错误
- 把 BFC 和 stacking context 当成同一个概念。
- 用
overflow: hidden清浮动，却意外裁剪下拉菜单。 - 只看父元素背景高度，不检查外边距和内部溢出。
继续阅读
下一篇把 BFC 应用于具体布局故障：BFC 的应用场景。
练习
- 用最小输入复现“BFC 的触发与规则”的成功路径，并记录可观察结果。
- 改变一个时序、数据或宿主条件，解释结果为何变化。
- 删除清理、校验或降级分支，写出能证明缺陷的断言。