clear属性只对块级元素有效，因其依赖块级格式化上下文中的上边框边界计算；浮动、绝对定位等脱离文档流的元素及内联元素均不适用，且需满足同父容器、紧邻前兄弟等dom位置约束。
clear 属性为什么只对块级元素起作用
因为 clear 的核心逻辑是“推下当前元素的上边框边界”，而这个边界只在块级格式化上下文（BFC）中被明确定义和参与垂直定位计算。内联元素（如 span、em）没有独立的上边界概念，浏览器直接忽略其 clear 声明。
你可以在开发者工具的 Computed 面板里检查目标元素的 display 值：只有值为 block、table、flow-root、flex 或 grid 时，clear 才可能生效；inline、inline-block、none 等均无效。
给浮动元素自己加 clear: both 为什么没用
浮动元素（比如设置了 float: left）已脱离标准文档流，它不再有“前一个浮动兄弟”作为参照对象，clear 的避让计算失去目标。即使你在 HTML 中写了 <div class="float" style="clear: both;"></div>，浏览器也会跳过该 clear 计算。
-
clear只对处于普通文档流中的块级盒有效 -
float、position: absolute、position: fixed都会让元素脱离流，clear失去意义 - 想控制浮动元素位置？改用
margin或容器级布局（display: flex）更直接
DOM 位置和父容器必须满足“紧邻同级”条件
clear: both 不是全局扫描所有浮动，它只看自己在 DOM 树中**前一个同级兄弟元素**是否浮动，且二者必须共属同一父容器。
- 中间插了注释节点
<!-- -->、空文本节点或display: contents容器，就会破坏「紧邻」关系 - 浮动元素在
.sidebar里，clear元素在.main里 → 无参照物，无效 - 父容器用了
display: flex或display: grid，子项自动进入弹性/网格上下文，clear被规范禁止使用
现代布局中 display: flow-root 是更干净的替代方案
如果你只是想让一个容器自动包含内部浮动子元素，display: flow-root 比 clear 更直接——它创建一个新的 BFC，天然隔离浮动影响，无需额外元素或 hack。
真正容易被忽略的点是：你看到的「clear 失效」，大概率不是属性写错了，而是元素没落在正确的盒类型 + 文档流 + DOM 位置三重约束里。这些隐式依赖，在 Flexbox 和 Grid 成为主流后，已经很少需要手动处理了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
