clear: both对元素自身无效，因其作用对象是该元素前面的浮动兄弟元素，而非自身；仅对块级元素生效，且要求目标元素与浮动元素同属一个父容器并处于其后。

clear: both 为什么对元素本身没用

因为 clear 不是“让当前元素对齐”，而是“让当前元素避开前面的浮动兄弟”。它只对**块级元素**生效，且只检查自己在 DOM 中**前面的、同级的、已浮动的兄弟元素**。如果你把 clear: both 加在一个浮动元素自己身上（比如 <div class="item" style="float: left; clear: both;">），它完全不会起效——浮动元素已经脱离文档流，<code>clear 对它无意义。

常见错误现象：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• clear: both 写在 <img alt="为什么CSS设置了clear:both还是没对齐_确认元素是否为浮动的兄弟" > 标签上，图片依然错位
• 给表格 <table> 直接加 <code>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 为啥常失效

<table> 默认是 <code>display: table，不是块级元素，clear 对它不生效。即使你手动设了 display: block，如果这个 <table> 是某个浮动 <code>div 的子元素，那它根本不在浮动兄弟的同一层级，clear 检查不到任何可避让的对象。

验证方法：

• 在开发者工具中选中该 <table>，看 <code>Computed 标签页里的 display 值是不是 block
• 再看它的父元素是否浮动，以及父元素的父元素是否设置了 overflow: hidden 或 display: flow-root——如果已经触发 BFC，内部浮动已被包裹，clear 就多余了
• 更稳妥的做法：不在 <table> 上加 <code>clear，而是在它**前面所有浮动元素的共同父容器外**，插入一个 <div style="clear: both"></div>

  真正需要 clear 的地方，往往不是你想的那个元素

  多数人加 clear: both 是想“让布局回到正常流”，但实际该加的位置，是**浮动结束之后、第一个要回归文档流的块级元素**。比如浮动导航栏 + 主内容 + 页脚，clear: both 应该加在 footer 上，而不是 main 或某个 img 上。

  容易被忽略的关键点：

  • clear 是“避让”，不是“对齐”；它解决的是后续元素被浮动顶上去的问题，不是浮动元素自身排不齐的问题
  • 如果多个浮动元素宽度总和超出了父容器，它们自然会换行——这时加 clear 只会让下一个元素掉到整行下面，而不是修复换行本身
  • 现代项目里，display: flow-root 比 clear 更可靠：它作用于父容器，自动包裹所有浮动子项，无需在 DOM 中塞空标签或依赖兄弟关系