浮动容器高度塌陷的本质是浮动元素脱离文档流，父容器无法感知其存在；overflow: hidden 比 auto 更稳妥地触发BFC来包含浮动；clearfix需 content: “”、display: table 和 clear: both；Flex/Grid 容器无需清浮动。
浮动容器高度塌陷的本质原因
当子元素全部浮动时，父容器会“看不见”它们，计算高度时当作内部为空，结果高度变成 0。这不是 bug，是 CSS 浮动的规范行为——浮动元素脱离普通文档流。
用 overflow: auto 为什么能撑开高度
它触发了块级格式化上下文（BFC），让容器重新包含浮动子元素的几何边界。但要注意副作用：
-
overflow: auto在内容溢出时可能意外出现滚动条（尤其在 Safari 或缩放页面下） - 如果容器本身需要横向滚动，
overflow: auto会同时启用 x/y 轴滚动，不精准 - 某些旧版 Android WebView 对
overflow: hidden的 BFC 触发更稳定，反而比auto更常用
.container {
overflow: hidden; /* 比 auto 更稳妥的 BFC 触发方式 */
}
::after 伪元素清除浮动（clearfix）怎么写才可靠
现代推荐写法必须包含 display: table 或 clear: both，且需设置 content: ""，否则无效。常见漏掉的点：
- 忘记给伪元素加
display，仅clear: both不起作用 - 用
visibility: hidden或height: 0替代display: table，在 Flex/Grid 容器中可能失效 - 没设
font-size: 0或line-height: 0，导致 IE 下有空白间隙
.clearfix::after {
content: "";
display: table;
clear: both;
}
什么时候该选哪种方案
没有银弹，取决于上下文约束：
