br标签的clear属性不能用于清除浮动，它已被W3C废弃、HTML5不支持；所谓“有效”只是强制换行顶开位置，未解决父容器高度塌陷，且在新版浏览器中易失效、语义错误、维护困难。
br 标签的 clear 属性在现代 HTML/CSS 中**不能用于清除浮动**，它早已被 W3C 废弃，HTML5 不再支持，也不该出现在新项目中。
br 的 clear="both" 为什么看起来“有效”但实际危险
某些旧代码里会出现类似 <br clear="both"> 的写法，它在部分浏览器（如老版 Chrome、IE）中确实会让后续内容换行到浮动下方——但这只是靠强制换行“顶开”了位置，并未让父容器重新包含浮动子元素。父容器高度依然塌陷为 0，浮动元素仍脱离文档流，后续布局随时可能错乱。
常见错误现象包括：
- 新版 Safari 或 Edge 实验性渲染模式下直接忽略
clear属性，页面突然错位 - W3C 验证器报错：
Attribute clear not allowed on element br - 语义混乱：
br本意是换行，不是布局控制，混用导致可维护性极差 - Firefox 只认
clear="both"，不支持clear="all"；IE 可能完全不解析
clear 属性真正起作用的对象是谁
clear 是 CSS 属性，不是 HTML 属性。它只对**紧接在浮动元素之后的块级兄弟元素**生效，作用是“避开前面已存在的浮动”，而不是“清理浮动本身”。
所以：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 加给浮动元素自己（
div.float-left { clear: both; }）→ 无效，clear不是“清自己” - 加给父容器（
.parent { clear: both; }）→ 无效，除非同时触发 BFC（如display: flow-root） - 加给后续
<p></p>或<div> → 有效，但必须是块级且在 DOM 顺序上紧随其后 <li>加给 <code><span></span>这类内联元素 → 必须先设display: block，否则不生效 - 图文环绕等少数场景保留
float: left/right，但父容器统一用display: flow-root（一行 CSS 触发 BFC，兼容 IE11+） - 导航栏、卡片列表、表单排列等——直接改用
display: flex或display: grid，浮动自动失效，无需任何清除 - 遗留项目需兼容 IE8–9？用
.clearfix::after伪元素方案，别碰br
现在该用什么替代 br + clear
如果你还在用 br clear，说明你很可能正用 float 做整体布局——这本身就是过时做法。2026 年的标准解法是：
最容易被忽略的一点：清除浮动不是目的，**让父容器正确计算高度并包裹子元素**才是。而 br clear 从没做到过这点——它只是假装做到了。
