clear属性仅对块级盒有效，其作用是将当前元素上边框边界下推至指定方向所有浮动元素下边框边界之下，且仅在bfc中明确定义；内联元素、非bfc元素及脱离文档流的浮动元素均不生效。
clear 属性的定位逻辑只定义在块级盒中
clear 不是“把浮动元素推开”，而是把当前元素的 上边框边界（top border edge） 往下推，直到它低于指定方向所有浮动元素的 下边框边界（bottom border edge）。这个“推”的计算过程，CSS 规范只在块级格式化上下文（BFC）中明确定义——而只有块级元素才参与 BFC 的垂直流定位。
内联元素（如 span、em）没有独立的上边框边界参与文档流垂直排列，浏览器直接忽略其 clear 声明；display: inline-block 虽生成盒，但不触发 BFC，且定位仍基于行内上下文，clear 同样静默失效。
验证方法：打开开发者工具，检查目标元素的 Computed 面板中 display 值。若不是 block、table、flow-root、flex 或 grid，clear 就不会起效。
浮动元素自己加 clear: both 为什么没用
浮动元素（如设置了 float: left）已脱离标准文档流，它不再有“前一个浮动兄弟”作为参照物，clear 的避让逻辑失去目标。
clear 只对处于普通文档流中的块级盒有效；float、position: absolute、position: fixed 都会让元素脱离流，clear 被浏览器跳过计算。
即使 DOM 中写的是 <div class="float" style="clear: both;"></div>，该 clear 声明也完全无效。想控制浮动位置？改用 margin 或容器级布局（如 display: flex）更直接。
DOM 位置和父容器必须满足“紧邻同级”条件
clear: both 不是全局扫描所有浮动，它只看自己在 DOM 树中 前一个同级兄弟元素 是否浮动，且二者必须共属同一父容器。
- 中间插了注释节点
<!-- -->、空文本节点或display: contents容器，就会破坏「紧邻」关系 - 浮动元素在
.sidebar里，clear元素在.main里 → 无参照物，无效 - 父容器用了
display: flex或display: grid，子项自动进入弹性/网格上下文，clear被规范禁止使用
你看到的「clear 失效」，大概率不是属性写错了，而是元素没落在正确的盒类型 + 文档流 + DOM 位置三重约束里。
现代替代方案：display: flow-root 更可靠
如果你本意只是“让父容器包住浮动子项，并让后续内容从下方顶格开始”，直接给父容器加 display: flow-root 比每个子元素都加 clear 干净得多。
它创建新的 BFC，天然隔离内部浮动，无需额外 DOM 节点或伪元素；兼容性良好（Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+），2026 年已无兼容顾虑；不受 JS 动态插入/删除影响——clear 依赖兄弟顺序，结构一变就容易失效。
注意：display: flow-root 不能替代 clear 的“强制错位”用途（比如让某个段落刻意避开左浮图片但保留右浮广告），那是不同需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
