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：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 语法合法，不会报错
• 但浏览器会**静默忽略该声明**（CSS 2.3 要求 user agent 忽略对非块级框的 clear 指定）
• 可通过 getComputedStyle(el).clear 读到值（如 "left"），但这只是存储值，不代表生效
• 想让内联元素避开浮动？必须先让它成为块级框，例如加 display: block 或 display: flow-root

容易被忽略的兼容性细节

某些旧版浏览器（如 IE6/7）曾允许 clear 在 inline-block 上“看似生效”，这是非标准行为，现代引擎已统一遵循规范。

立即学习“前端免费学习笔记（深入）”；

/* 这段代码中，span 不会因 clear:left 而下移 */
<span style="clear: left; background: #eee">文本</span>
<p>/<em> 正确做法：显式触发块格式化上下文 </em>/
<span style="display: block; clear: left; background: #eee">文本</span>

真正关键的不是“是不是 HTML 块标签”，而是“是否生成块级框”。div 设 display: inline 后，clear 同样失效；span 设 display: flow-root，clear 就能起作用。