clear: both 只清除同级前一个浮动元素，不穿透父容器；逐层加 clear 失效因父容器未形成 bfc 导致塌陷；治本之法是让父容器触发 bfc（如 display: flow-root）。
clear: both 在多级嵌套中根本“清不到”深层浮动——它只检查自己前面的**同级浮动兄弟元素**，不向上穿透父容器。所以你给最内层子元素加 clear: both，外层父容器照样塌陷、后续内容上移。
为什么逐层加 clear 会失效
常见错误现象：.nav 里套 .submenu，.submenu 里再套 .sub-submenu，每一层都用了 float，并在末尾加了 clear: both，但最外层 .nav 高度仍为 0。
-
clear不是“清除所有祖先浮动”，它只作用于当前元素在 DOM 中的**前一个同级浮动元素** - 如果某一层父容器没形成 BFC，它自身高度就塌陷，子级再怎么
clear，父容器也“看不见”那个浮动流 - 嵌套越深，漏掉某一级
clear的概率越高；哪怕只漏一层，整条链就断了
逐层 clear 必须满足的结构前提
如果你因遗留代码或框架限制，非得手动逐层加 clear，那必须保证：
- 每一级浮动容器内部，
clear元素必须是**最后一个子元素**，且与浮动子元素处于**同一 DOM 层级**（不能写在浮动元素内部） - 不能这样写：
<div class="float-item"><div style="clear:both"></div></div>—— 无效 - 必须这样写：
<div class="float-item"></div> <div class="float-item"></div> <div style="clear:both"></div> - 每一级容器都得有显式的“收尾”元素，否则该层无法撑开高度
更可靠的做法：让父容器自己包裹浮动
真正治本的方式，不是在子元素上堆 clear，而是让每一级父容器**主动形成 BFC**，天然隔离并包裹浮动子元素：
-
display: flow-root：现代标准写法，无副作用，Chrome 64+/Firefox 58+ 支持，一行解决：.container { display: flow-root; } -
overflow: hidden：兼容性好，但会裁剪position: absolute溢出内容，慎用于弹窗、下拉菜单等场景 -
position: relative+z-index: 0：能触发 BFC，但会创建新层叠上下文，影响z-index计算逻辑
注意：display: flex 或 display: grid 的父容器本身已隐式形成 BFC，此时 float 和 clear 都失效，别白费劲。
现代项目里该直接放弃 clear 的场景
只要容器支持 display: flex 或 display: grid，就别碰 clear：
-
float本就不是为复杂布局设计的，而是为文字环绕服务的 - Flex 容器中，
float会被忽略（除float: none外），clear自然无效 - Grid 同理，浮动完全被 layout engine 忽略
- IE11 及以下才需要重度依赖
clear；2026 年多数项目可安全用flow-root或重构为 Flex/Grid
真正难的不是怎么写 clear，而是判断哪一层该由谁来负责包裹浮动——这个责任边界一旦划错，后面全是补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
