空 div 清除浮动既破坏语义又无效：屏幕阅读器误读、搜索引擎无信息、clear: both 仅对紧邻浮动后的块级兄弟生效，且在移动端、构建工具、JS 动态场景下易失效；现代应改用 display: flow-root 或 ::after 伪元素，主流框架已弃用 clearfix。
空 div 会破坏 HTML 语义结构
HTML 的 <div> 本身无语义，加一个纯为样式服务的 <div class="clear"></div>，等于在 DOM 中硬塞一个“视觉挡板”。屏幕阅读器会把它当作一个真实内容节点读出来（除非加 aria-hidden="true"），搜索引擎无法从中提取任何信息，WCAG 和 HTML5 规范都明确将其归为冗余标记。
clear: both 在错误位置完全无效
clear: both 只对「紧邻浮动元素之后的块级兄弟元素」生效。常见误用包括：
-
.parent { clear: both; }—— 父容器没参与浮动流，声明被浏览器直接忽略 -
.float-box { clear: both; }—— 浮动元素自己设clear，不影响父容器高度 - 把空
<div>插在两个浮动元素中间 —— 它只清前面那个，后面仍塌陷
移动端和构建工具下容易静默失效
看似一行标签就能解决，实际埋雷很多：
- 旧版 Android WebView 给空
<div>默认最小高度（约 19px），导致移动端多出空白 - HTML 压缩工具（如 html-minifier）可能自动移除空标签，清除逻辑静默消失
- JS 动态增删浮动元素时，
<div class="clear">极易遗漏或重复插入，父容器高度忽高忽低 - Flex/Grid 布局下它完全冗余，但没人记得删，变成技术债
现代替代方案更干净、更可控
真正麻烦的不是写法，而是维护盲区：
立即学习“前端免费学习笔记（深入）”；
-
display: flow-root一行创建独立 BFC，不污染 HTML、不裁剪溢出、不干扰position: fixed，Chrome 64+ / Firefox 59+ / Safari 15.4+ 全支持 - 伪元素方案（
::after）可复用、可全局管理，且避免了 DOM 节点膨胀 - 框架如 Bootstrap 5、Tailwind 已彻底移除
.clearfix类 —— 不是忘了加，是主动放弃 float 布局路径
最易被忽略的是：当你还在手动加空 <div> 时，你其实还在用 2008 年的思路解决 2026 年的问题。浮动布局本身已退出主流，清除动作本就不该存在。
