clear用于强制块级兄弟元素避开浮动元素换行，应加在需恢复正常流的下一个块级元素上，而非浮动元素自身；它对inline、absolute或脱离文档流元素无效，现代布局优先使用flex/Grid。
Float 导致后续文字紧贴浮动元素右侧（或左侧）不换行
这是 float 最典型的副作用：它让元素脱离文档流，但后续的**块级元素仍会无视浮动继续渲染**，而**内联内容（如文字、span）会自动绕行**。如果你发现段落文字从浮动元素底部开始才正常换行，大概率是没对后续内容做流式隔离。
关键不是“清除浮动”，而是“让后续内容知道自己该从新行开始”。clear 的作用就是告诉浏览器：“这个元素的上边界，不能和前面任何 float: left 或 float: right 元素的同一侧对齐”。
-
clear: left→ 该元素顶部必须低于所有左侧浮动元素的底边 -
clear: right→ 同理，避开右侧浮动 -
clear: both→ 最常用，彻底避开左右两侧浮动，强制换行
什么时候该加 clear，加在谁身上？
不是给浮动元素自己加 clear（它自己已经浮起来了），而是加在**需要恢复正常文档流的下一个兄弟元素**上。比如一个 div 浮左，后面跟一个 p，你想让 p 从下一行完整宽度显示，就给 p 加 clear: both。
常见错误是把 clear 加在浮动容器内部（比如浮动子元素的父容器），这完全无效——clear 只对块级兄弟元素起作用。
立即学习“前端免费学习笔记（深入）”；
/* 错误：对浮动元素自身加 clear */ .float-box { float: left; clear: both; /* 没用，它已经浮走了 */ } / 正确：加在下一个兄弟块元素上 / .content-after-float { clear: both; }
为什么有时 clear 不生效？检查这三点
clear 失效往往不是语法错，而是布局上下文干扰：
- 目标元素本身是
inline或display: inline-block——clear只对block、table、flex等块级盒模型有效 - 目标元素被设置了
position: absolute或position: fixed—— 脱离文档流后，clear失去参照系 - 浮动元素和目标元素不在同一层 dom 层级（比如中间隔了
transform或Filter创建的新层叠上下文）
现代替代方案：float 已过时，优先用 flex 或 grid
虽然 clear 能解决问题，但整套浮动布局逻辑脆弱、易出错。css Grid 和 Flexbox 原生支持文字环绕与流式控制，且无需手动清理：
.container { display: grid; grid-template-columns: 200px 1fr; } .sidebar { float: left; } /* 不推荐 */ .main { clear: both; } /* 更不推荐 */ / 替代写法（推荐） / .container { display: grid; grid-template-columns: 200px 1fr; } .sidebar { grid-column: 1; } .main { grid-column: 2; }
真正难处理的是老项目里遗留的浮动 + clear 组合，这时候别硬改结构，先确认 clear 是否加在正确的目标块级元素上，再检查它的 display 和 position 是否让它“看得见”浮动边界。