clear: both对元素自身无效，因其作用对象是该元素前面的浮动兄弟元素，而非自身；仅对块级元素生效，且要求目标元素与浮动元素同属一个父容器并处于其后。
clear: both 为什么对元素本身没用
因为 clear 不是“让当前元素对齐”，而是“让当前元素避开前面的浮动兄弟”。它只对**块级元素**生效，且只检查自己在 DOM 中**前面的、同级的、已浮动的兄弟元素**。如果你把 clear: both 加在一个浮动元素自己身上（比如 ），它完全不会起效——浮动元素已经脱离文档流，
clear 对它无意义。
常见错误现象：
-
clear: both 写在 ![]()
- 给表格
直接加 clear: both，但表格还在侧边栏右侧“悬空”
- 父容器内有两个
float: left 的 div，你在第二个里加 clear: both，结果它被推到第一行末尾下方，而不是和第一个对齐
怎么确认目标元素是不是浮动元素的兄弟
打开浏览器开发者工具，选中你加了 clear: both 的那个元素，在 Elements 面板里往上数：它的直接父节点下，前面是否还有其他 float: left 或 float: right 的同级元素？没有，就说明 clear 根本没东西可清。
实操建议：
- 用
getComputedStyle(el).float 在控制台检查兄弟元素是否真有浮动（注意返回值是 "left"/"right"/"none"，不是布尔值）
- 检查 DOM 结构：如果浮动元素被包在另一个
div 里，而你要清的元素在那个 div 外面，那它面对的是整个容器，不是单个浮动项
-
clear 只看“前面”的兄弟，不看“里面”或“后面”的——哪怕你把它写在最后一个浮动项之后，只要它不是块级、或不在同一父容器下，照样无效
table 上 clear: both 为啥常失效
默认是 display: table，不是块级元素，clear 对它不生效。即使你手动设了 display: block，如果这个 是某个浮动 div 的子元素，那它根本不在浮动兄弟的同一层级，clear 检查不到任何可避让的对象。验证方法：
- 在开发者工具中选中该
，看 Computed 标签页里的 display 值是不是 block
- 再看它的父元素是否浮动，以及父元素的父元素是否设置了
overflow: hidden 或 display: flow-root——如果已经触发 BFC，内部浮动已被包裹，clear 就多余了
- 更稳妥的做法：不在
上加 clear，而是在它**前面所有浮动元素的共同父容器外**，插入一个 真正需要 clear 的地方，往往不是你想的那个元素
多数人加 clear: both 是想“让布局回到正常流”，但实际该加的位置，是**浮动结束之后、第一个要回归文档流的块级元素**。比如浮动导航栏 + 主内容 + 页脚，clear: both 应该加在 footer 上，而不是 main 或某个 img 上。
容易被忽略的关键点：
-
clear 是“避让”，不是“对齐”；它解决的是后续元素被浮动顶上去的问题，不是浮动元素自身排不齐的问题
- 如果多个浮动元素宽度总和超出了父容器，它们自然会换行——这时加
clear 只会让下一个元素掉到整行下面，而不是修复换行本身
- 现代项目里，
display: flow-root 比 clear 更可靠：它作用于父容器，自动包裹所有浮动子项，无需在 DOM 中塞空标签或依赖兄弟关系
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
