IE8+项目首选.clearfix::after伪元素法，因其兼顾语义、可控性与历史兼容性，完整写法为.content: ""; display: table; clear: both;，需配合*zoom: 1支持IE6/7。
IE8+项目首选 .clearfix::after 伪元素法
兼容性最好的方案不是最简的，而是兼顾语义、可控性和历史支持的伪元素法。它能覆盖 IE8 及以上所有现代浏览器，且不污染 HTML 结构。
关键点在于写法必须完整：
-
content: ""不可省略，否则伪元素不生成 -
display: table比block更稳——天然触发 BFC，且不会因继承line-height导致额外高度 -
clear: both必须作用在::after上，::before仅用于防 margin 折叠（可选） - IE6/7 需补
*zoom: 1触发 hasLayout，但当前时间（2026年）已极少需要
标准写法（无 IE6/7 兼容需求）：
.clearfix::after {
content: "";
display: table;
clear: both;
}
overflow: hidden 看似简单，但容易踩坑
它确实能在 IE7+ 触发 BFC，让父容器包含浮动子项，但副作用极隐蔽：
立即学习“前端免费学习笔记（深入）”；
- 任何溢出内容（如
position: absolute下拉菜单、负margin拉伸、box-shadow）会被直接裁剪 - 若父容器本就需要横向滚动（比如轮播图容器），
overflow: hidden会禁用滚动 - 在 flex/grid 容器中设
overflow: hidden，可能干扰其内部对齐行为
它不是“清浮动”，只是借触发 BFC 偶然达成效果，用前务必确认父容器没有溢出需求。
空标签法 <div style="clear:both"></div> 适合快速验证或老系统修补
这是最直白、兼容性无敌的方式（从 IE6 到 Chrome 128 都有效），但只应在特定场景下用：
- 临时调试：加一行就能立刻判断是不是浮动塌陷问题
- 遗留系统：DOM 已固化、无法改 CSS、又不允许加 class 的硬编码页面
- 必须加在所有浮动子元素之后的**直接兄弟位置**，写在中间或父元素上都无效
为避免空标签引入意外高度，建议显式重置：
<div style="clear:both; height:0; font-size:0; overflow:hidden"></div>
别再用 display: flow-root 当兼容性主力
虽然它是 W3C 标准解（语义清晰、无副作用），但实际落地受限：
- Chrome 64+/Firefox 58+/Safari 15.4+ 支持，但 IE 完全不支持，Android WebView 旧版本（尤其 4.x）也缺失
- 部分 CMS 或低版本构建工具（如旧版 Webpack + postcss）可能未自动注入前缀或 fallback
- 它和
overflow: hidden一样，会改变定位上下文——position: absolute子项将以它为参考而非视口
当前（2026年）可放心用于新项目，但只要目标环境含 IE 或老旧安卓 WebView，就得 fallback 到 .clearfix。
真正难的不是选哪个方法，而是判断“这里是否真该用 float”。如果只是为了多列布局，现在直接写 display: flex 或 display: grid，父容器自动撑开，根本不用清——清浮动本身，就是个信号：你还在用图文环绕的工具干布局的活。
