空标签清除浮动在现代项目中已属反模式，不建议在任何新代码中使用。
为什么空 <div> 会破坏 HTML 语义结构
HTML 的 <div> 本身是无语义的通用容器，但加一个纯为样式服务的空标签（如 <div class="clr"></div>），等于在 DOM 中硬塞一个“视觉挡板”。它不表达内容、不承载功能、不参与交互——屏幕阅读器必须解析它却无法播报有效信息，搜索引擎无法从中提取语义价值，可访问性树里多出一个无意义节点。W3C 明确反对这种将表现层逻辑侵入结构层的做法。
空标签的清除行为极易失效
clear: both 只对「紧邻浮动元素之后的块级兄弟元素」生效，而空标签常被误插在错误位置：
-
.parent { clear: both; }—— 父容器未参与浮动流，声明被浏览器完全忽略 -
.float-box { clear: both; }—— 浮动元素自己设clear，不影响父容器高度 - 把空
<div>插在两个浮动元素中间 —— 它只清前面那个，后面仍塌陷
空标签在工程实践中埋下大量隐性雷
看似一行就能解决，实际维护成本远超预期：
立即学习“前端免费学习笔记（深入）”；
- 旧版 Android Browser 给空
<div>加默认最小高度（约 19px），移动端莫名多出空白 - HTML 压缩工具（如 html-minifier）可能自动移除空标签，清除逻辑静默失效
- JS 动态增删浮动子项时，
<div class="clr">极易遗漏或重复插入，父容器高度忽高忽低 - Flex/Grid 布局下它完全冗余，但没人记得删，变成技术债
真正麻烦的不是写法本身，而是它掩盖了根本问题：你还在用 float 做布局。2026 年的真实项目里，display: flex 或 display: grid 才是默认选择，连“清除”这个动作都该消失。如果必须兼容老环境，优先用 display: flow-root 或伪元素方案，而不是往 DOM 里塞空壳。
