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，否则不生效

现在该用什么替代 br + clear

如果你还在用 br clear，说明你很可能正用 float 做整体布局——这本身就是过时做法。2026 年的标准解法是：

• 图文环绕等少数场景保留 float: left/right，但父容器统一用 display: flow-root（一行 CSS 触发 BFC，兼容 IE11+）
• 导航栏、卡片列表、表单排列等——直接改用 display: flex 或 display: grid，浮动自动失效，无需任何清除
• 遗留项目需兼容 IE8–9？用 .clearfix::after 伪元素方案，别碰 br

最容易被忽略的一点：清除浮动不是目的，**让父容器正确计算高度并包裹子元素**才是。而 br clear 从没做到过这点——它只是假装做到了。