嵌套浮动导致父容器塌陷需逐层清除，因clear仅作用于直接子浮动；现代方案应优先用display: flex/grid/flow-root替代float以避免问题。
子浮动元素导致父容器高度塌陷更严重
当一个已浮动的容器（比如 .sidebar）内部还有子元素也设置了 float: left，父容器不仅不包裹子元素，连自身都可能脱离文档流——此时外部布局完全失控，常见表现为后续区块直接“上移”覆盖内容。根本原因是：每一层浮动都会脱离当前上下文的文档流，而清除操作只作用于**当前层的直接子浮动**，不会递归生效。
不能只靠一层 ::after 清除所有嵌套浮动
给最外层容器加 .clearfix::after { clear: both; } 只能清除它直系的浮动子项；如果它的某个子元素本身也是浮动的（例如 .widget），且内部又含 float 元素，那这个 .widget 的高度仍为 0，无法撑开自身，也就无法被外层 ::after 感知。
- 必须对**每一级需要自适应高度的浮动容器**单独应用清除逻辑
- 若某层容器本就不该浮动（如仅用于布局分组），优先改用
display: flow-root替代float - IE11 及以下不支持
flow-root，此时需退回到带::after的.clearfix类
逐层清除的实操建议
假设结构是：
.col 和 .card 都用了 float：
-
.wrap必须加clearfix（清除.col） -
.col本身若浮动，就不能再依赖它来包裹.card；要么给.col也加clearfix，要么把.col改成display: flow-root -
.card内部有浮动图片和标题？同样要加clearfix或改用display: flex——别指望外层一次清除全搞定 - 检查开发者工具的盒模型：如果某容器高度显示为
0，说明它那一层的浮动还没被清除
现代方案比“逐层清除”更省事
真正麻烦的不是清除逻辑写几遍，而是维护成本高、容易漏掉某一层。现在绝大多数场景下，float 已非必要：
- 文字环绕图片？用
float: left+margin依然有效，无需清除 - 多栏布局？直接用
display: flex或display: grid，天然包含子项，无塌陷问题 - 兼容性要求到 IE11？
display: flow-root是语义清晰、零副作用的清除替代方案 - 还在用浮动做导航栏？
inline-block或flex更可控，且避免了清除位置错位这类隐性 bug
嵌套浮动的清除本质是补救旧布局模型的缺陷，越往深层补，越容易漏掉某一级的 ::after 或误判 clear 应用位置。真要保留浮动，就老老实实每一层都独立处理；但更值得花时间的是，把浮动从根源上替换成现代布局方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
