不推荐用 clear: both 的空 div，因其污染 HTML 结构、无语义、难维护且不利于 SEO 和无障碍；现代应优先用 ::after 伪元素触发 BFC 或直接采用 Flex/Grid 布局。
clear: both 的空 div 为什么现在不推荐用
它确实能强行让后续内容避开浮动区域，但代价是污染 HTML 结构——为了纯样式目的硬塞一个 <div></div>，语义为零，维护时容易被误删或误解。现代布局中，这属于“用结构妥协样式”的典型反模式。
- 搜索引擎和屏幕阅读器会多解析一个无意义节点
- 后续改用 Flex 或 Grid 时，这个
<div> 变成冗余残留<li>如果浮动元素动态增减，还得手动同步增删这个“清浮点”，容易漏</li> <h3>替代方案：用 ::after 伪元素触发 BFC</h3> <p>本质是让父容器自己“包住”浮动子元素，而不是靠外部元素去“拦”。关键在触发块级格式化上下文（BFC），<code>::after是最轻量的实现方式。- 给浮动元素的**直接父容器**加这段 CSS：
.container::after { content: ""; display: table; clear: both; } -
display: table比display: block更稳妥——后者在某些老版 IE 中对clear支持不一致 - 如果父容器本身有
height: 0或overflow: hidden，可能掩盖浮动溢出，此时伪元素方案仍有效
遇到 inline-block 间隙或 flex 容器失效怎么办
当父容器用了
font-size: 0、letter-spacing或display: flex，::after的content: ""可能被压缩或忽略。- 优先检查父容器是否设置了
display: flex或display: grid——这两种布局天然包含清除浮动能力，根本不需要clear - 若必须兼容老浏览器且父容器是
inline-block，把伪元素改成.container::after { content: ""; display: inline-block; width: 0; height: 0; overflow: hidden; clear: both; } -
overflow: hidden在父容器上单独使用也能触发 BFC，但会裁剪position: absolute子元素的溢出部分，这点常被忽略
哪些场景下还不得不留空 div
极少数遗留系统或受限环境，比如只能改 HTML 不能动 CSS 的 CMS 模板、某些邮件客户端内联样式限制、或者需要支持 IE6–7 的政府旧系统。
立即学习“前端免费学习笔记（深入）”；
- 如果非用不可，空
<div> 必须写成 <code><div style="clear:both;"></div>，避免依赖外部 CSS - 不要用
<br clear="both">——HTML5 已废弃clear属性，且语义更差 - 这类代码建议加注释，比如
<!-- IE6 fallback: clear floats -->，方便后人识别意图
真正麻烦的不是写法本身，而是判断“什么时候该放弃清除浮动思维”——比如把浮动换成
display: inline-block或直接切到 Flex，往往比修一个clear更省事。 - 给浮动元素的**直接父容器**加这段 CSS：
