空div能清浮动是因为它作为块级元素设clear: both后强制避开前面浮动，使父容器包含其高度；但需严格置于浮动末尾、显式设height: 0等防折叠，且易被压缩工具删除或维护遗漏。
为什么空div能“清浮动”，但不是加了就灵
空 div 本身不带任何语义或布局作用，它起效的关键在于：**它是一个普通流中的块级元素，且设置了 clear: both**。浏览器在计算父容器高度时，会包含这个非浮动、有明确位置的子元素，从而“顺便”把前面所有浮动子元素也包裹进去。但前提是它必须放在所有浮动子元素之后，且不能被折叠、隐藏或误删。
clear: both 必须紧跟浮动末尾，中间不能插 inline 元素
常见失效场景是：浮动元素后跟了文字、 、span 或 margin 折叠导致的视觉空隙——这些看似“空白”的内容，会让 clear: both 的定位基准偏移，清除失效。
- ✅ 正确顺序：
<div class="float-left"></div> <div class="float-right"></div> <div class="clear"></div> - ❌ 错误写法：
<div class="float-left"></div>文本<div class="clear"></div>（文本是 inline，clear不对其生效） - ⚠️ 隐患写法：
<div class="float-left"></div> <div style="margin-top: 20px"></div> <div class="clear"></div>（中间块级元素可能触发 margin 折叠，破坏清除逻辑）
空div必须显式控制尺寸和显示，否则移动端易出空白
默认 div 有 display: block 和基础行高，若不干预，会在页面上撑开不可见但占位的空间，尤其在 iOS Safari 或 Android WebView 中更明显。
- 务必设置
height: 0或font-size: 0消除默认高度 - 推荐完整样式：
.clear { clear: both; height: 0; overflow: hidden; font-size: 0; line-height: 0; } - 避免用
visibility: hidden或display: none——前者仍占文档流，后者直接让清除失效
构建工具或 CMS 可能悄悄删掉它，得留一手验证
Webpack、Vite 的 HTML 压缩插件（如 html-minifier-terser）或 WordPress 主题的自动清理逻辑，常把无内容、无属性的空 div 当作冗余节点移除。上线后发现塌陷重现，往往就是它没了。
立即学习“前端免费学习笔记（深入）”；
- 加个无害但可识别的
data-clear属性：<div class="clear" data-clear="float"></div> - 在 JS 初始化后快速检查：
document.querySelector('.clear[data-clear="float"]')是否存在 - 命名别用泛义名如
clear或clearfix，改用上下文相关名，比如article-body-clear
div，而是加完之后没人记得它存在——它不像 CSS 规则那样能全局搜索，也不像 JS 函数那样有调用链路，只是一行静默的 HTML，在重构、迁移或权限交接时最容易被当成“死代码”顺手删掉。 
