浮动容器高度塌陷的本质是浮动元素脱离文档流，父容器无法感知其存在；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;
}什么时候该选哪种方案
没有银弹，取决于上下文约束：
立即学习“前端免费学习笔记（深入）”；
- 父容器本身不允许溢出（如卡片、弹窗）→ 优先
overflow: hidden - 需要支持老 IE（≤8）→ 必须用
clearfix，且伪元素要写成.clearfix { *zoom: 1; } - 父容器已是 Flex 或 Grid 容器 → 根本不需要清浮动，
float在这类上下文中已失去布局意义 - 只是临时调试 → 直接加
border: 1px solid red看高度是否恢复，比反复切方案更快
真正容易被忽略的是：很多所谓“高度塌陷”其实源于子元素用了 position: absolute 或 display: none，和浮动根本无关。先确认子元素真的在文档流里、真的浮动了，再动手清。
