clear属性仅对生成块级框的元素生效，取决于display计算值而非html标签类型；它通过下移自身上边框边界来避开指定方向的浮动元素，不创建bfc也不撑开父容器。
clear 属性只对块级盒生效，不是因为 HTML 元素类型，而是 display 计算值
它不看你是 <div> 还是 <code><span></span>，只认最终渲染时的 display 值。只有当元素生成「块级框（block-level box）」时，clear 才会参与布局计算。
以下 display 值能让 clear 实际起效：
block-
flow-root（显式创建 BFC，推荐替代overflow: hidden） -
table、table-cell、table-row等 table 系列值（但注意：table-cell单独设clear通常无效，因不构成独立块框） list-item
而这些值会让 clear 被浏览器静默忽略：
-
inline、inline-block、inline-table -
flex、grid容器及其子项（规范明确禁止） -
float自身的元素（它已脱离正常流，clear对它无意义）
给 inline 元素设 clear: left 看似合法，但完全没用
语法上不会报错，getComputedStyle(el).clear 甚至能读出 "left"，但这只是存储值，不触发任何布局行为。
常见误操作：
- 给
<span></span>或<em></em>直接加clear: both—— 浏览器直接跳过 - 以为
display: inline-block+clear能绕开浮动 —— 实际仍被忽略（旧版 IE 的“看似生效”是 bug，现代引擎已统一修正）
想让内联内容避开浮动？必须先让它成为块级框：display: block 或更优的 display: flow-root。
clear 不是清除浮动，而是移动自身上边界
它不改变浮动元素的位置或状态，只强制当前元素的**上边框边界（top border edge）** 下移到所有指定方向浮动元素的**下边框边界之下**。
这个动作依赖「块级格式化上下文（BFC）」的布局规则。而内联元素不参与 BFC 的块级流排布，没有「上边框边界需对齐浮动下沿」这一计算逻辑，所以 clear 对它无从下手。
典型错误现象：
- 在浮动元素自己身上写
clear: both—— 前面没浮动兄弟，无效 - 父容器设
clear: both却仍塌陷 —— 它前面没浮动元素，clear不触发 BFC，也撑不起高度 - 用
clear试图修复多层嵌套浮动 —— 层级一深就失控，应换display: flex或display: grid
现代布局中，clear 已退居二线，但理解它仍关键
Flexbox 和 Grid 容器里，float 和 clear 都被忽略——这不是 bug，是规范设计。但只要还在维护老项目、做图文混排或兼容性兜底，clear 就没过时。
真正容易被忽略的点是：clear 是一个「位置偏移指令」，不是「BFC 触发器」。它本身不创建隔离环境，也不撑开父容器。你看到的「清除了浮动影响」，往往是 clear + 块级盒 + 父容器 BFC（比如伪元素 clearfix）共同作用的结果，别把功劳全归给 clear。
