空 div 清除浮动既破坏语义又无效：屏幕阅读器误读、搜索引擎无信息、clear: both 仅对紧邻浮动后的块级兄弟生效，且在移动端、构建工具、js 动态场景下易失效；现代应改用 display: flow-root 或 ::after 伪元素，主流框架已弃用 clearfix。
空 div 会破坏 HTML 语义结构
HTML 的 <div> 本身无语义，加一个纯为样式服务的 <code><div class="clear"></div>，等于在 DOM 中硬塞一个“视觉挡板”。屏幕阅读器会把它当作一个真实内容节点读出来（除非加 aria-hidden="true"），搜索引擎无法从中提取任何信息，WCAG 和 HTML5 规范都明确将其归为冗余标记。
clear: both 在错误位置完全无效
clear: both 只对「紧邻浮动元素之后的块级兄弟元素」生效。常见误用包括：
-
.parent { clear: both; }—— 父容器没参与浮动流，声明被浏览器直接忽略 -
.float-box { clear: both; }—— 浮动元素自己设clear，不影响父容器高度 - 把空
<div> 插在两个浮动元素中间 —— 它只清前面那个，后面仍塌陷 <h3>移动端和构建工具下容易静默失效</h3> <p>看似一行标签就能解决，实际埋雷很多：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul><li>旧版 Android WebView 给空 <code><div> 默认最小高度（约 19px），导致移动端多出空白 <li>HTML 压缩工具（如 html-minifier）可能自动移除空标签，清除逻辑静默消失</li> <li>JS 动态增删浮动元素时，<code><div class="clear"> 极易遗漏或重复插入，父容器高度忽高忽低 <li>Flex/Grid 布局下它完全冗余，但没人记得删，变成技术债</li> <h3>现代替代方案更干净、更可控</h3> <p>真正麻烦的不是写法，而是维护盲区：</p> <ul> <li> <code>display: flow-root一行创建独立 BFC，不污染 HTML、不裁剪溢出、不干扰position: fixed，Chrome 64+ / Firefox 59+ / Safari 15.4+ 全支持 - 伪元素方案（
::after）可复用、可全局管理，且避免了 DOM 节点膨胀 - 框架如 Bootstrap 5、Tailwind 已彻底移除
.clearfix类 —— 不是忘了加，是主动放弃 float 布局路径
最易被忽略的是：当你还在手动加空 <div> 时，你其实还在用 2008 年的思路解决 2026 年的问题。浮动布局本身已退出主流，清除动作本就不该存在。</div>
