现代开发中不该用空标签清除浮动，因其维护困难、兼容性差且易被构建工具删除；应改用display: flow-root或flex布局，从根源上消除浮动问题。

空标签清除浮动在现代开发中基本不该用——它能临时起效，但埋下的维护和兼容性问题远超其价值。

为什么 clear: both 必须加在块级兄弟元素上

浏览器只对「紧接在浮动元素之后、且处于正常文档流中的块级兄弟元素」应用 clear: both。它不是作用于父容器，也不是作用于浮动自身，而是靠这个“挡板”强行中断浮动流的延续。

• 错误写法：
  文本
  —— 文本是 inline 元素，clear 不对其生效，定位基准偏移
• 隐患写法：
  —— 中间块级元素可能触发 margin 折叠，导致 clear 实际作用位置错位
• 必须保证顺序严格：所有浮动子元素 → 紧跟一个块级空
  → 无任何 inline 内容或折叠干扰

  空

  在移动端和构建流程中容易失效

  看似一行 HTML 就能解决，实际在真实环境中极易静默崩溃。

  

  CSS工具箱(专业版)

  全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

  下载

  • 旧版 Android Browser 给空
    设有约 19px 的最小高度，页面多出不可见但占位的空白
  • Webpack/Vite 的 html-minifier-terser 或 WordPress 主题清理逻辑，常把
    当作冗余节点直接删除
  • JS 动态增删浮动元素时，
    极易遗漏、重复插入，父容器高度忽高忽低
  • 推荐加 data-clear="float" 属性（如
    ），上线后可用 document.querySelector('.clear[data-clear="float"]') 快速验证是否还在

  真正麻烦的不是加不加，而是没人记得它存在

  它不像 CSS 规则能全局搜索，也不像 JS 函数能统一管理。一旦上线，就变成一个藏在 HTML 里、无语义、无交互、无日志的“幽灵节点”。更关键的是，它掩盖了一个事实：你还在用 float 做布局 —— 而 2026 年的真实项目里，display: flow-root 或 display: flex 才是默认选择，连“清除”这个动作都该消失。