clear属性仅对紧邻的同级浮动兄弟元素生效，必须作用于标准流中的块级元素，且需满足块级、直接同级、无中间元素隔断三前提；现代布局推荐用display: flow-root或Flex/Grid替代。
clear属性只对后续兄弟块级元素生效
它不是“清除前面浮动”，而是让当前元素避开紧邻的同级浮动兄弟。所以必须加在浮动元素之后、且是标准流中的块级元素上，比如 <p>、<div>（没设 float）、<section> 等。
常见错误是给浮动元素自己加 clear: both——比如 .item { float: left; clear: both; }，这完全无效：它已脱离文档流，clear 对它不参与布局计算。
- ✅ 正确位置：
<div class="float-left"></div><div class="float-right"></div><p style="clear: both">我被推下来了</p> - ❌ 错误位置：
<div class="float-left" style="clear: both"></div>（无作用） - ❌ 错误位置：
<div class="parent" style="clear: both"></div>（父容器前面没浮动兄弟，语法虽合法但无效）
为什么加了clear: both却没效果？检查三个前提
clear: both 要起效，必须同时满足：① 当前元素是块级；② 它是浮动元素的**直接同级兄弟**；③ 中间不能插其他非浮动块级元素隔断“紧邻”关系。
典型失效场景：
立即学习“前端免费学习笔记（深入）”；
- 浮动
<div>和目标<p>之间夹了一个普通<div>—— 这个中间元素会“吃掉”浮动上下文，<p>前面已无浮动兄弟，clear不触发 - 目标元素是
<span>或设置了display: inline——clear只对块级盒生效，内联元素无视该声明 - 浮动元素被
display: none或position: absolute隐藏 —— 它们不算文档流中的浮动兄弟，clear不识别
clear: left / right / both 的实际区别在哪
不是“清除力度不同”，而是“等待条件不同”：每个值只检查对应侧是否有浮动兄弟，只要一侧满足就停，不会继续下移。
-
clear: left：只等左侧所有浮动元素的下边界过去，右侧有浮动也照常渲染 —— 适合左浮广告后接正文 -
clear: right：同理，只管右侧，左侧不管 —— 少用，易在混合浮动时出错 -
clear: both：左右都得空才开始渲染，更稳妥，但可能多留空白 —— 实际项目中几乎总用这个
注意：clear: both 并不保证“左右都清干净”，它只是说“我上线前，左右都不能有浮动兄弟”。如果页面只有左浮，both 和 left 表现一样；但若未来加了右浮，left 就会失效。
现代布局里，clear基本可以不用了
如果你的目标是让父容器包住浮动子项（防塌陷），或让文字老老实实从浮动下方开始，clear 是绕远路。直接用 display: flow-root 更干净：
.container { display: flow-root; } —— 触发 BFC，自动包含浮动子项，不裁剪 position: absolute 内容，也不依赖 DOM 插入顺序。
Flex/Grid 容器内的子元素写 float 本身就被忽略，clear 更是完全无效。真要控制排列，用 flex-wrap 或 grid-auto-flow 才是正解。
真正需要 clear 的场景越来越窄：比如维护老项目、或必须兼容 IE11 且不能改 HTML 结构时，才考虑它。否则，优先换思路。
