clear: both 在多层嵌套中失效，因其仅作用于紧邻的前一个浮动兄弟元素，不穿透父容器；若父容器未形成bfc，高度塌陷，子级clear无法撑开父容器。
clear: both 为什么在多层嵌套里失效
因为 clear 只作用于**紧邻的前一个浮动兄弟元素**，不穿透父容器。父容器如果没形成 BFC，高度会塌陷，子级的 clear 就像清空气——它确实清了，但父容器根本“看不见”那个浮动流。
常见错误现象：div 里套了两层浮动子元素，最内层用了 clear: both，外部容器依然塌陷、后续内容上移。
- 不要指望子元素的
clear能“帮”父容器撑开高度 -
clear不是“清除所有祖先浮动”，它只检查自己前面的同级浮动元素 - 嵌套越深，靠逐层加
clear越容易漏掉某一层，维护成本指数上升
更可靠的替代方案：触发 BFC 而非硬清
让父容器自己“包裹住”浮动子元素，比在每一层子元素上塞 clear 更治本。BFC（块格式化上下文）能隔离浮动影响，天然解决塌陷问题。
常用且兼容性好的触发方式（选其一即可）：
- 给最外层父容器加
overflow: hidden（注意：会裁剪position: absolute溢出内容） - 用
display: flow-root（现代写法，无副作用，Chrome 64+/Firefox 58+ 支持） - 加
float: left或position: absolute（但会改变文档流，慎用）
示例：
.container {
display: flow-root; /* 一行解决，无需关心内部几层浮动 */
}
不得已要逐层 clear 时，必须加的结构约束
如果因历史代码或 CSS 框架限制，真得手动逐层加 clear，那必须保证：每一层浮动容器内部，clear 元素必须是**最后一个子元素**，且与浮动元素处于**同一层 DOM 级别**。
- 不能把
clear放在浮动元素的子元素里（比如浮动div里面再放一个div style="clear:both"—— 无效） - 每一级容器都得有“收尾”元素：
<div class="float-left"></div> <div style="clear:both"></div> - Flex 或 Grid 容器中
clear完全无效，此时必须换思路（改用align-items或place-content控制）
现代项目里该直接放弃 clear 的场景
只要容器本身支持 display: flex 或 display: grid，就别碰 clear。浮动布局本就是为文字环绕设计的，不是为复杂布局准备的。
- 用
flex布局时，float会失效（除float: none外），clear自然也无效 - 用
grid时同理，浮动被忽略，clear不起作用 - IE11 及以下才需要重度依赖
clear；现在多数项目可安全用flow-root或flex
真正难的不是怎么写 clear，而是判断哪一层该由谁来负责包裹浮动——这个责任边界一旦划错，后面全是补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
