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，不要依赖 这类冗余标签 —— 它们破坏语义、增加维护负担，且在嵌套浮动中极易漏清。
