现代开发中不该用空标签清除浮动，因其维护困难、兼容性差且易被构建工具删除；应改用display: flow-root或flex布局，从根源上消除浮动问题。
空标签清除浮动在现代开发中基本不该用——它能临时起效，但埋下的维护和兼容性问题远超其价值。
为什么 clear: both 必须加在块级兄弟元素上
浏览器只对「紧接在浮动元素之后、且处于正常文档流中的块级兄弟元素」应用 clear: both。它不是作用于父容器，也不是作用于浮动自身，而是靠这个“挡板”强行中断浮动流的延续。
- 错误写法：
<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 折叠，导致clear实际作用位置错位 - 必须保证顺序严格：所有浮动子元素 → 紧跟一个块级空
<div> → 无任何 inline 内容或折叠干扰 <h3>空 <code><div> 在移动端和构建流程中容易失效 <p>看似一行 HTML 就能解决，实际在真实环境中极易静默崩溃。</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>Webpack/Vite 的 <code>html-minifier-terser或 WordPress 主题清理逻辑，常把<div class="clear"></div>当作冗余节点直接删除 - JS 动态增删浮动元素时，
<div class="clear"> 极易遗漏、重复插入，父容器高度忽高忽低 <li>推荐加 <code>data-clear="float"属性（如<div class="clear" data-clear="float"></div>），上线后可用document.querySelector('.clear[data-clear="float"]')快速验证是否还在
真正麻烦的不是加不加，而是没人记得它存在
它不像 CSS 规则能全局搜索，也不像 JS 函数能统一管理。一旦上线，就变成一个藏在 HTML 里、无语义、无交互、无日志的“幽灵节点”。更关键的是，它掩盖了一个事实：你还在用 float 做布局 —— 而 2026 年的真实项目里，display: flow-root 或 display: flex 才是默认选择，连“清除”这个动作都该消失。
立即学习“前端免费学习笔记（深入）”；
