空div违反HTML语义规范，因其仅为样式服务而无实际内容或结构意义，增加无价值DOM节点，损害可访问性与SEO；clear:both仅对紧邻浮动元素后的块级兄弟元素生效，误用会导致清除失效。
空 div 为什么违反 HTML 语义规范
HTML 的 <div> 是通用容器，本身无语义；加一个纯为样式服务的空 <code><div style="clear:both"></div>，等于在结构层硬塞了一个“视觉挡板”。W3C 明确反对这种做法——它让屏幕阅读器多解析一个无意义节点，搜索引擎无法从中提取任何内容价值，还干扰 DOM 可访问性树。
clear: both 必须作用在正确元素上
这个属性只对「块级、且紧邻浮动元素之后的兄弟元素」生效。常见错误包括：
-
.parent { clear: both; }—— 父容器没参与浮动流，声明完全被忽略 -
.float-box { clear: both; }—— 浮动元素自己设clear，不影响父容器高度 - 把空
<div> 插在两个浮动元素中间 —— 它只清前面那个，后面仍塌陷 <h3>空 div 在现代开发中容易引发隐性问题</h3> <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> <ul><li>旧版 Android Browser 给空 <code><div> 默认最小高度（约 19px），导致移动端多出空白 <li>构建工具（如 HTML minifier）可能自动移除空标签，清除逻辑静默失效</li> <li>JS 动态增删浮动元素时，<code><div class="clear"> 极易遗漏或重复插入，父容器高度忽高忽低 <li>Flex/Grid 布局下它完全冗余，但没人记得删，变成技术债</li> <h3>真正麻烦的不是写法，而是维护盲区</h3> <p>伪元素方案写一次就能复用，空 div 却要每个容器手动加。它不像 CSS 规则能全局搜索，也不像 JS 函数能统一管理——一旦上线，就很容易被遗忘。更关键的是，它掩盖了根本问题：你还在用 <code>float做布局，而 2026 年的真实项目里，display: flex或display: grid才是默认选择，连“清除”这个动作都该消失。
