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; /* 没用，它已经浮走了 */
}
<p>/<em> 正确：加在下一个兄弟块元素上 </em>/
.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; } /* 更不推荐 */
<p>/<em> 替代写法（推荐） </em>/
.container {
display: grid;
grid-template-columns: 200px 1fr;
}
.sidebar { grid-column: 1; }
.main { grid-column: 2; }真正难处理的是老项目里遗留的浮动 + clear 组合，这时候别硬改结构，先确认 clear 是否加在正确的目标块级元素上，再检查它的 display 和 position 是否让它“看得见”浮动边界。
