br标签的clear属性在HTML5中已被废弃，浏览器直接忽略，DOM中不存在；clear是CSS属性，仅对浮动元素后的块级兄弟元素生效，正确清除方式包括display:flow-root、伪元素clearfix或空div。
br 标签的 clear 属性根本不能用
直接说结论：br 标签的 clear 属性在 HTML5 中已被明确废弃，浏览器解析时会直接忽略它，DOM 中根本不会出现这个属性。你写成 <br clear="both">，现代 Chrome/Firefox/Safari/Edge 全部不认——不是“偶尔失效”，是压根没这回事。
常见错觉是“页面看起来清掉了”，其实是因为后面恰好有个 p 或 div 自带换行或 margin，跟 br 无关；在 display: flex 或 display: grid 容器里加它，更是完全无反应，还污染语义。
clear 属性必须作用于块级兄弟元素
clear 是 CSS 布局属性，只对「紧跟在浮动元素之后」的块级元素生效，且该元素必须是浮动元素的**后续兄弟元素**（同级、在 DOM 中排在其后），而不是父容器或浮动元素自己。
- ✅ 正确：给浮动元素后面那个
p加clear: both - ❌ 错误：给浮动元素自身加
clear: both（它不“避开自己”） - ❌ 错误：给父容器加
clear: both（父容器不是浮动元素的兄弟） - ⚠️ 注意：如果后续是
span这类内联元素，得先设display: block才能生效
推荐三种实际可用的清除方式
真正起作用的只有基于块级盒模型的方案，选一种即可：
立即学习“前端免费学习笔记（深入）”；
-
最简洁现代方案：给浮动元素的父容器设
display: flow-root。它创建 BFC，天然包裹浮动子项，无副作用，Chrome 64+ / Firefox 58+ / Safari 15.4+ 全支持 -
兼容性最广方案：用伪元素 clearfix，CSS 写
.clearfix::after { content: ""; display: table; clear: both; }，HTML 中给父容器加class="clearfix"。无需额外标签，IE8+ 可用 -
最直观调试方案：在浮动元素后插入一个空
div并设style="clear: both"。行为明确，但增加无语义 DOM 节点
什么时候其实根本不需要 clear
绝大多数新项目里，你本就不该用 float 做布局：
- 导航栏、卡片列表、表单排列 → 直接用
display: flex或display: grid，父容器自动包裹高度，无需任何清除 - 图文环绕（如
img左浮 + 文字环绕）→ 浮动仍有效，但清除动作应落在后续段落上，而不是插个br - 如果看到 flex 布局下仍有塌陷，大概率是父容器没真正启用 flex（比如漏了标准声明），或误用了
float在 flex item 上（此时float被忽略）
关键点容易被忽略：clear 不是“让下一行从头开始”，而是让当前块级元素的上边界，下移到前面所有浮动元素的底部之下——这个计算只发生在块级盒之间。br 没有盒、没有边界、不参与布局流，它连入场资格都没有。
