空div法仍可用因其在老旧CMS、IE6–IE7兼容场景及CSS不可修改时能快速解决浮动塌陷；但会引入无语义节点，易致移动端空白、动态插入遗漏及构建工具误删等隐患。
空div法为什么还能用，但别乱加
它确实能立刻解决问题，尤其在老旧 CMS 或紧急修 bug 场景下——加一个 <div class="clear"></div>，再配 .clear { clear: both; }，父容器就能撑开。但代价是 HTML 里塞了个纯样式用途的“幽灵节点”，既没语义，也不利于维护。
哪些场景下你可能不得不选空div法
不是所有项目都能自由改 CSS：比如 WordPress 早期主题、某些封闭后台模板、或需要兼容 IE6–IE7 的遗留系统。这时直接加标签反而是最快最稳的解法。
- 无法修改现有 CSS 文件（权限受限或打包工具锁死）
- 浮动结构动态生成，且 JS 不方便操作伪元素（如某些富文本编辑器输出）
- 调试时临时验证是否真由浮动导致塌陷——一眼看到
<div class="clear"> 就知道“清浮点”在哪 <h3>容易踩的坑：看似简单，实则埋雷</h3> <p>空 div 表面无害，实际在移动端和老浏览器里容易出意外。</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a> <p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul><li>旧版 Android Browser 默认给空 <code><div> 设最小高度（约 19px），导致布局多出空白 <li>如果浮动元素是 JS 动态增删的，<code><div class="clear"> 很可能被遗漏或重复插入，父容器高度忽高忽低 <li> <code>clear: both只对紧邻的浮动兄弟生效；若中间穿插了 inline 元素或 margin 折叠，清除可能失效 - 部分构建工具会自动移除空标签（如某些 HTML minifier），让清浮逻辑悄悄消失
- 用
height: 0; overflow: hidden;替代默认高度，避免意外占位 - 避免用
id="clear"这类泛用名，改用带上下文的命名，比如class="post-content-clear" - 配合 JS 检查：在浮动内容更新后，调用
document.querySelector('.post-content-clear')确保它还在正确位置
现代项目里怎么安全地用空div法
真要用，就把它当“手术刀”，而不是“创可贴”。只在明确不可替代时才上，且必须控制副作用。
立即学习“前端免费学习笔记（深入）”；
真正麻烦的从来不是加不加这个 div，而是加完之后没人记得它存在——它不像 CSS 规则那样能被全局搜索，很容易变成“幽灵技术债”。
