br标签的clear属性在现代浏览器中完全无效，因html5已从语法层面移除该属性，浏览器解析时直接忽略；br是行内换行符，不生成盒模型，而clear仅对参与bfc的块级元素生效。
br 标签的 clear 属性在现代浏览器中完全无效，不是兼容性问题，而是 HTML5 已从语法层面移除它——浏览器解析时直接忽略，连 warning 都不报。
br 的 clear 属性为什么根本不起作用
它失效不是因为“写法不对”或“浏览器版本低”，而是模型级不匹配：
-
br是行内换行符，不生成块级盒（no box），而clear是 CSS 布局属性，只对参与块格式化上下文（BFC）的块级元素生效 - HTML5 规范明确废弃了
br的clear属性；Chrome、Firefox、Safari、Edge 全部跳过解析，不进入布局计算流程 - 即使你写成
<br clear="both">，DOM 中也看不到该属性，DevTools 里查不到，getAttribute('clear')返回null - 所谓“看起来清掉了”，往往是后续恰好有个块级元素（如
p或div）自带 margin 或换行行为，属于巧合，不是br起的作用
为什么现代项目绝不能依赖这个写法
这不是“不推荐”，而是语义与规范双重冲突：
- 语义污染：
br表达的是“换行”，不是“布局控制”，加clear让它承担本不属于它的职责，破坏 HTML 的可读性和可访问性 - 屏幕阅读器可能误读为“换行并清除”，但实际无清除逻辑，影响残障用户理解页面结构
- 在 Flex/Grid 布局中插入带
clear的br，不仅没效果，还会干扰自动换行和flex-wrap行为 - W3C 验证工具（如 validator.w3.org）会直接报错：Attribute
clearnot allowed on elementbr
真正起作用的清除方式，只选一种就行
所有有效方案都基于 CSS 布局机制，而非 HTML 标签 hack：
- 给浮动元素的父容器设
display: flow-root—— 最简洁，现代浏览器全支持（Chrome 64+、Firefox 59+、Safari 15.4+），无副作用，不裁剪position: absolute子项 - 用伪元素 clearfix：
.clearfix::after { content: ""; display: table; clear: both; }—— 兼容 IE8+，需确保三要素齐全（content、display、clear），别漏掉content: "" - 在浮动流末尾插入一个块级元素并设
clear: both，如<div style="clear:both"></div>—— 行为明确、调试直观，但多一个无语义标签，仅建议用于临时排查
最容易被忽略的一点：clear 不是“清理浮动属性”，而是让当前元素的上边界避开前面浮动元素的下边界——这个计算必须发生在块级盒模型中。br 连盒都没有，自然连“被计算”的资格都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
