br 标签的 clear 属性在 html5 中已被废弃，现代浏览器直接忽略，所谓“有效”实为换行、默认 margin 或 bfc 等干扰因素造成的假象，正确清除浮动应使用 display: flow-root 或 clearfix 伪元素。
br 标签加 clear 属性根本不是清除浮动的合法手段，它早已被 HTML5 标准废弃，所有现代浏览器（Chrome、Firefox、Safari、Edge）在解析时直接忽略该属性，不报错、不警告、不生效。所谓“能用”，只是旧代码残留或巧合渲染导致的误判。
为什么 br clear="both" 看起来有时“有效”
这不是 CSS 清除逻辑在起作用，而是以下干扰因素造成的假象：
-
br强制换行，后续内容自然另起一行——但这和clear无关，是换行符本身的语义行为 - 后面紧跟的块级元素（如
p或div）自带默认margin-top，视觉上“拉开距离”，被误认为是清除了浮动 - 父容器恰好设置了
overflow: hidden或触发了 BFC，真正起作用的是那个 CSS 规则，不是br - 在老旧文档类型（如 HTML4）或 quirks mode 下，部分浏览器曾容忍该写法，但这种兼容性早已不可靠
维护时会踩哪些坑
一旦项目里混入 <br clear="both"> 这类写法，后续修改极易出问题：
- 校验工具（如 W3C Validator、HTMLHint）直接报错：
Attribute clear not allowed on element br - 团队新人看到
br就以为是“换行+清浮”组合技，复制到 Flex/Grid 布局中完全无效，还污染语义 - 屏幕阅读器可能读作“换行，清除”，但实际无清除行为，造成可访问性误导
- 无法用 CSS 覆盖或调试：你不能给
br写clear: both，也不能用:has()或其他选择器精准控制它的布局影响 - 升级构建工具（如 Vite、Webpack）或启用严格 HTML 解析后，该标签可能被预处理器直接剔除或静默忽略
真正该关注的清除点在哪
清除浮动的关键从来不是“插个什么标签”，而是明确三点：
- 谁需要被“撑开”？→ 通常是浮动元素的**父容器**（解决高度塌陷）
- 谁需要“避开浮动”？→ 是**紧接在浮动元素之后的兄弟块级元素**（比如下一个
div或p） - 用什么机制实现？→ 现代首选
display: flow-root（父容器），或退而求其次用.clearfix::after（兼容性要求高时）
把逻辑绑在 br 上，等于把布局控制权交给了一个本不该参与布局的内联换行符——它没有盒模型、不响应 clear、不参与 BFC，连被计算的资格都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
