HTML5 无新浮动清除机制，clear: both 失效主因是父容器未形成BFC致高度塌陷；推荐伪元素法.clearfix::after清除浮动，或直接用flex/grid替代float布局。

HTML5 本身不提供新的浮动清除机制，float 和清除逻辑仍沿用 CSS2.1 的规则。所谓“HTML5 浮动清除”，实际是用现代 CSS 方式替代传统 float 布局，或在必须用 float 时更可靠地清除。

为什么 clear: both 经常失效？

失效主因不是 HTML5，而是父容器未形成块级格式化上下文（BFC），导致浮动元素脱离文档流后，父容器高度塌陷，clear 元素虽被“推下”，但视觉上仍卡在塌陷区域里。

• clear 只作用于**同级浮动元素之后的块级元素**，对父容器无影响
• 若 clear 元素本身 display: inline 或被包裹在非块级容器中，清除无效
• 浮动元素未闭合（如缺少 clear 元素或伪类）时，后续所有内容都可能受其影响

推荐的清除方式：伪元素法（::after）

这是最稳定、语义干净、无需额外 HTML 标签的方案，兼容所有现代浏览器（包括 IE8+）。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.clearfix {
  *zoom: 1; /* IE6/7 触发 hasLayout */
}

• 必须给浮动容器添加 class="clearfix"
• display: table 比 block 更稳妥，避免 margin 合并干扰
• *zoom: 1 是 IE6/7 专属 hack，如已放弃支持可省略

替代 float 的现代布局方案

真正解决“浮动清除”问题的思路，是不用 float 做布局 —— 它本就不是为页面布局设计的。

• display: flex：一行代码替代浮动+清除，父容器加 display: flex 即可让子项水平排列，无需 float
• display: grid：适合二维布局，彻底摆脱浮动依赖
• display: inline-block + vertical-align：轻量替代，注意元素间空格会生成间隙

例如用 Flex 替代两栏浮动：

.container {
  display: flex;
}
.left { width: 200px; }
.right { flex: 1; }

哪些场景还不得不保留 float？

目前仅剩两类合理使用场景：文字环绕图片 和 旧系统兼容性兜底。其余情况强行用 float 布局，后续清除成本远高于直接换 Flex/Grid。

如果必须浮动，请始终搭配 clearfix，不要依赖 这类冗余标签 —— 它们破坏语义、增加维护负担，且在嵌套浮动中极易漏清。