嵌套浮动导致父容器高度为0是css规范行为而非bug：浮动元素脱离文档流，父容器计算高度时忽略它们；display: flow-root是最简可靠的逐层修复方式，通过建立bfc天然撑高容器且无副作用。
为什么嵌套浮动会让父容器高度变成0
这不是 bug，是 CSS 规范行为：浮动元素脱离文档流，父容器在计算高度时直接忽略它们。嵌套时问题被放大——比如 .list → .row → .card 都用了 float，只要 .row 没触发 BFC，它自己高度就是 0，.list 清除的只是个空盒子，自然撑不开。
常见现象：.list 的 background 不显示、border 缩成一条线、后续兄弟元素顶上来；开发者工具里看 .row 的 computed height 是 0px，但 .card 内容明明还在。
-
clear: both加在.card末尾，只防它内部换行，对.row高度无影响 -
overflow: hidden加在.list上，若.row已塌陷，照样无效 - 伪元素
::after只清除“直系”浮动子项，看不见孙子级浮动
display: flow-root 是最简可靠的逐层修复方式
它让容器主动建立 BFC，把所有后代浮动框“关”在里面，天然撑高，且无副作用。比 overflow: hidden 安全（不裁剪 position: absolute 下拉菜单），比 .clearfix 干净（不用伪元素、不干扰 content）。
实操建议：
- 给每一级「自身是浮动容器、且内部含浮动子项」的元素加
display: flow-root，例如：.list、.row、.card - IE10 及更早不支持，如需兼容，改用
overflow: hidden或伪元素方案 -
flow-root会重置某些继承行为（如em缩放），若容器内有相对单位文本，需检查是否意外缩放
伪元素 clearfix 在嵌套中必须逐层手动添加
很多人复制了标准 .clearfix::after 却失效，往往是因为只加在最外层。它不是“全局清除”，而是每层都得自己负责自己的浮动。
标准写法（缺一不可）：
.clearfix::after {
content: "";
display: table;
clear: both;
}
关键点：
- 必须加在每一级浮动父容器上，不能靠
.list.clearfix一劳永逸 - Chrome DevTools 默认不显示
::after，要勾选 “Show user agent shadow DOM” 才能确认是否渲染成功 - 若父容器设了
height或min-height，会覆盖 clearfix 带来的高度计算 - 别在
display: flex容器里徒劳加::after，它根本不参与布局
什么时候该彻底放弃浮动
浮动本就不是为复杂嵌套设计的。强行清除是补救，换布局模型才是归途。
推荐路径：
- 一维排列（横/纵）→ 改用
display: flex：.list { display: flex; flex-wrap: wrap; }，子项自动成为 flex item，无需float - 二维网格（行列均控）→ 改用
display: grid：.list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } - 图文环绕、小图标对齐等传统场景可保留
float，但别让它承担整体布局
真正棘手的从来不是怎么清，而是哪一层该清——修之前，先用开发者工具逐层检查 computed height，从第一个 0px 开始下手，而不是盯着最外层调样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
