标签不支持clear属性，所谓“”是HTML 3.2/4.01废弃写法，现代HTML5中非法且无效；其“看似有效”源于浏览器向后兼容的宽容解析，并非标准行为；应改用CSS clear、BFC（如display: flow-root）或现代布局替代。
br 标签根本没有 clear 属性
直接说结论：<br> 标签不支持 clear 属性，HTML 规范里压根没这回事。你看到的所谓“<br clear="both">”是早已废弃的 HTML 3.2/4.01 旧写法，现代浏览器虽可能兼容性保留（比如 Chrome 渲染时仍会识别），但它是非法标记，W3C 验证器报错，且在 XHTML 或 HTML5 中完全无效。
真正起作用的不是 <br>，而是浏览器对这个废弃属性的“宽容式 fallback”——它悄悄把该 <br> 当作具有清除浮动行为的元素处理，本质是历史包袱，不是设计意图。
为什么用 br clear="both" 会“看似有效”
这种写法常出现在老项目或复制粘贴的代码里，效果看起来像清除了浮动、实现了换行，原因有二：
- 浏览器引擎（如 WebKit/Blink）为向后兼容，对
<br clear="left">、<br clear="right">、<br clear="both">做了特殊解析，内部等效于插入一个带clear: both的匿名块级框 - 它恰好出现在浮动元素之后、需要换行的位置，视觉上“顶开了下一行”，让人误以为是
<br>自身的能力
但这种行为不可靠：在严格模式（）下部分浏览器可能忽略；若父容器触发了 BFC（比如设置了 <code>overflow: hidden），它的“清除”效果甚至会失效；更严重的是，它无法响应式控制，不能配合 Flex/Grid 使用。
立即学习“前端免费学习笔记（深入）”；
现代替代方案：用 CSS clear 或 BFC 容器
真正可控、标准、可维护的做法是放弃 <br clear>，改用 CSS 清除或布局机制：
- 在需要换行的元素前加一个空标签并设
clear: both：<div style="clear: both"></div>（语义差，但直观） - 给浮动元素的父容器触发 BFC，比如设置
overflow: hidden、display: flow-root（推荐，flow-root是专为此设计的，无副作用） - 用伪元素清除法（经典 clearfix）：
.clearfix::after { content: ""; display: table; clear: both; }，然后给父容器加class="clearfix" - 直接迁移到现代布局：用
display: flex或display: grid替代浮动，根本不需要 clear
注意：display: flow-root 是目前最干净的方案——它创建 BFC 同时不影响盒模型，也不依赖伪元素或额外 DOM 节点。
实际调试时怎么快速定位问题
如果你发现页面中某个 <br clear="both"> 突然不生效，别先改它，先检查这几件事：
- 当前文档是否为 HTML5（
）？是的话，<code>clear属性已被忽略，只是旧引擎“凑巧”还支持 - 浮动元素的父容器是否设置了
overflow: hidden或display: flex？这些会干扰传统清除逻辑 - 开发者工具里选中那个
<br>，看 computed 样式里有没有clear: both—— 很大概率没有，说明它根本没生效，只是你没注意到其他样式在起作用 - 用
outline: 1px solid red给所有浮动元素临时加轮廓，观察布局塌陷范围，比盯着<br>更快定位根源
浮动布局本身已是遗留技术，<br clear> 是套在遗留技术上的另一层遗留语法。真正要花时间的，不是让它“再工作一次”，而是判断：这里是否真的还需要浮动？
