子元素浮动后，父容器背景像消失了一样，常见原因是普通文档流没有为浮动子项撑出同样高度。
本文使用HTML5、CSS 与当时浏览器可支持的布局能力，示例为局部页面。页面表现由文档结构、布局规则和浏览器环境共同决定。本文以可核对的 DOM（文档对象模型）和样式计算为起点，不使用后续才普及的布局属性。
1. 从现象推到机制
浮动影响后续行盒与周围排布，父级高度计算需要理解浮动与格式化上下文的规则。BFC（块级格式化上下文）能改变部分包含与外边距行为，但不同触发方法还有裁剪、滚动等副作用。
图中的四个节点分别表示浮动子项、父级高度、清除机制、副作用。顺着实线检查输入如何变成输出，再沿虚线核对反馈条件。图示表达的是本文讨论的关系，不是实测曲线或现场截图。
2. 最小实现与输入条件
先用两张浮动卡片复现，再比较 clearfix 与 overflow 方案。不要为了撑高就随手加隐藏溢出，导致下拉内容被裁掉。
1
2
3
4
5
6
.clearfix::after {
content: "";
display: table;
clear: both;
}
.item { float: left; width: 120px; }
将片段放进带 UTF-8 声明和 viewport 设置的演示页。使用开发者工具检查实际盒尺寸、计算样式与请求；多浏览器或移动端结论需要在相应环境重新验证。
3. 用对照区分原因
下表列出需要主动改变的条件。预期行为来自机制分析，复现时还需记录运行环境和原始输出，不能将预期当作已经测得的结果。
| 改变的条件 | 需要验证的行为 |
|---|---|
| 父级只有浮动子项 | 背景高度可能不符合直觉 |
| 使用清除浮动伪元素 | 可让父级高度包含相应布局 |
| overflow hidden 撑高 | 还可能裁掉超出内容 |
对照 1：父级只有浮动子项
背景高度可能不符合直觉。观察时记录普通流内容与浮动几何。把这个条件与基准情形分开，有助于判断变化来自哪一层；若得到相反结果，应先核对前提，再修改实现。
对照 2：使用清除浮动伪元素
可让父级高度包含相应布局。观察时记录清除元素的位置与高度。把这个条件与基准情形分开，有助于判断变化来自哪一层；若得到相反结果，应先核对前提，再修改实现。
对照 3：overflow hidden 撑高
还可能裁掉超出内容。观察时记录弹层边缘和滚动行为。把这个条件与基准情形分开，有助于判断变化来自哪一层；若得到相反结果，应先核对前提，再修改实现。
4. 适用条件与取舍
BFC 不是一个万能修复按钮。定位元素、滚动容器和浮动规则各有适用范围，应根据页面实际结构选择。
一次正常运行只覆盖了这组输入。继续扩展前，应把上面的异常对照保留下来，尤其关注“overflow hidden 撑高”这一分支。后续方案若改变了图中任意一处依赖，原来的判断就要重新验证，不能仅凭界面相似或返回值相同沿用结论。
