clear属性仅对生成块级框的元素生效，即display值为block、table（部分）、flow-root、list-item时有效；flex/grid容器及其子项、inline/inline-block元素设clear会被浏览器静默忽略。
clear 属性的适用元素类型由 css 规范明确定义
clear 属性在 CSS 规范中**并非仅限于块级元素**，但它的效果只对「参与正常流布局且具有块容器特性的元素」有意义。规范（CSS 2.3 §10.3）明确指出：clear 作用于「块级框（block-level boxes）」，而是否生成块级框，取决于元素的 display 值，而非 html 元素本身的分类。
哪些 display 值能让 clear 生效
只有当元素的 display 计算值为以下之一时，clear 才会产生实际布局影响：
block-
table（包括table-cell、table-row等子类型，但注意：单个table-cell不生成独立块框，clear对其无效） -
flow-root（显式创建 BFC，可响应clear） list-item-
flex和grid容器本身不参与浮动清除逻辑——它们的子项即使设了clear也**被忽略**（规范明确说明：clear不适用于 flex/grid 容器或其子项）
inline 元素设 clear 会怎样
如果给 display: inline 或 inline-block 的元素设置 clear：
- 语法合法，不会报错
- 但浏览器会**静默忽略该声明**（CSS 2.3 要求 user agent 忽略对非块级框的
clear指定） - 可通过
getComputedStyle(el).clear读到值（如"left"），但这只是存储值，不代表生效 - 想让内联元素避开浮动？必须先让它成为块级框，例如加
display: block或display: flow-root
容易被忽略的兼容性细节
某些旧版浏览器（如 IE6/7）曾允许 clear 在 inline-block 上“看似生效”，这是非标准行为，现代引擎已统一遵循规范。
立即学习“前端免费学习笔记（深入）”；
/* 这段代码中，span 不会因 clear:left 而下移 */ 文本 / 正确做法：显式触发块格式化上下文 / 文本
真正关键的不是“是不是 HTML 块标签”，而是“是否生成块级框”。div 设 display: inline 后，clear 同样失效；span 设 display: flow-root，clear 就能起作用。