已被W3C废弃，HTML5中不支持clear属性；应改用CSS伪元素clearfix或Flex/Grid布局替代浮动。
为什么 <br clear="both"> 现在基本不用了
它确实能“压住”浮动元素，让后续内容从浮动下方开始，但这是 HTML 4 时代的遗留写法，clear 属性早已从 <br> 标签中被移除——现代浏览器虽大多仍兼容，但 W3C 已明确废弃，HTML5 中 <br> 不再支持 clear 属性。
常见错误现象：<br clear="both"> 在某些严格模式或新版本浏览器（如新版 Safari 或 Edge 的实验性渲染模式）下完全失效，页面布局突然错乱，且校验工具直接报错。
- 这不是 CSS 清除浮动，是 HTML 标签的 hack 式用法
- 无法通过 CSS 控制，一旦写死就难维护
- 语义混乱：
<br>本意是换行，不是布局控制
clear: both 应该加给谁？别加错容器
真正起作用的是 CSS 的 clear 属性，但它必须作用于「紧接在浮动元素之后」的块级元素上，而不是浮动元素自己，也不是父容器（除非用 BFC）。
使用场景：比如一个 <div class="float-left"> 向左浮动，后面跟一个 <code><p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)">CSS工具箱(专业版)</a>
<p>全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p>
</div>
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>，你想让这个 <p></p> 从浮动下方开始显示，那就给这个 <p></p> 加 clear: both。
立即学习“前端免费学习笔记（深入）”；
- 加给浮动元素自身无效（
clear是“避开前面的浮动”，不是“清理自己”） - 加给父容器没用，除非同时触发 BFC（比如加
overflow: hidden） - 如果后续是内联元素（如
<span></span>），得先让它变成块级（display: block）才能生效
更可靠的做法：用伪元素清除（clearfix）
这是目前最通用、语义清晰、无额外标签的方案，核心是给浮动元素的父容器加一个带 ::after 的类。
`.clearfix::after {
content: "";
display: table;
clear: both;
}`
然后在 HTML 中：<div class="clearfix"><div class="float-left">...</div></div>
- 不需要修改 HTML 结构，不依赖
<br>或空标签 -
display: table兼容 IE8+；若需支持 IE6/7，可改用display: block; height: 0; visibility: hidden; - 注意：如果父容器本身有
height或min-height，可能掩盖清除效果，优先用display: table避免高度塌陷
Flex/Grid 出来后，还用清浮动吗
绝大多数新项目里，你根本不需要清浮动——因为不再用 float 做布局了。
使用场景变了：导航栏、卡片列表、表单排列这些过去靠浮动的地方，现在直接用 display: flex 或 display: grid，天然不塌陷、不重叠、无需 clear。
- 浮动只保留在图文环绕（
float: left / right+ 文字流）这种特定排版需求中 - 只要父容器用了
flex或grid，子元素浮动会自动脱离文档流，但此时clear对它已无意义 - 老项目迁移时最容易忽略这点：把浮动代码原样保留，却在外部套了个
flex容器，结果行为不可预测
<br clear="both">，大概率是在维护十年前的代码。
