浮动嵌套导致父容器高度塌陷逐层传递，因浮动元素脱离文档流，父容器无法感知其高度；需在每层浮动容器上单独触发bfc（如display:flow-root）或改用flex/grid布局彻底规避。
浮动嵌套会让父容器高度塌陷逐层传递
所有浮动子元素脱离文档流，父容器就“看不见”它们的高度；嵌套时，这种塌陷会从最内层一路向上传染——.card塌了 → .card-body也塌 → .page最终只剩一条边框线。这不是 bug，是 CSS 规范定义的行为。
常见错误现象包括：background-color 消失、border 缩成细线、后续兄弟元素直接顶替父容器位置（比如页脚上移）。用 DevTools 查看 computed height，大概率是 0px。
- 只给最外层加
::after { clear: both }，中间层仍塌陷，边框/背景全丢 - 误以为
clear: both能穿透层级——它只对同级浮动兄弟生效，对孙子级无效 - 在浮动子项末尾加
clear: both，只是把那个子项往下推，完全不解决父容器撑高问题
clear: both 在嵌套结构里根本不是“清一次就够”
clear 的作用范围仅限于当前元素与**同级浮动元素**的关系。嵌套三层浮动容器（如 .container > .row > .col），就得在三个不同层级分别处理清除或 BFC 创建——顶层一个 .clearfix 解决不了任何问题。
容易踩的坑：
- 在
.col末尾加div style="clear:both"，只能防止.col内部后续内容绕行，但.row依然高度为 0 - 用
overflow: hidden强制触发 BFC，却意外裁剪了position: absolute的下拉菜单或 tooltip - 滥用
overflow: auto，内容没溢出也弹出滚动条，破坏视觉一致性
display: flow-root 是现代浏览器里最干净的替代方案
display: flow-root 不是“清除”，而是让容器自己成为 BFC 容器，把所有后代浮动（无论嵌套几层）都关在里面。它不依赖伪元素、不引入空标签、不裁剪溢出内容，副作用仅是重置 margin-collapse。
兼容性已覆盖主流环境：Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+。IE 完全不支持——如果必须兼容 IE11，才退回到 ::after + clear: both。
写法极简：
.container {
display: flow-root;
}
注意：flow-root 会重置某些继承行为（如缩放），若容器内有 em 单位文本，需检查是否意外缩放。
真正棘手的从来不是“怎么清”，而是“该在哪一层清”
很多人盯着最外层调样式，其实问题藏在第二层容器没设 BFC 或没承接浮动流。修的时候，先用浏览器开发者工具定位哪一层的 computed height 是 0px，再针对性加 display: flow-root——不是所有嵌套层都需要，只有那些“内部全是浮动、自身又没非浮动内容”的容器才必须处理。
如果项目允许，直接用 display: flex 或 display: grid 替代浮动更彻底：它们天然不脱离文档流，父容器自动包裹子项，连“清不清”的问题都不存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
