clearfix 仍值得用，因其是局部浮动+不可改结构场景下最轻量、兼容性最佳的方案，通过伪元素触发BFC且不裁剪溢出内容，优于overflow:hidden。
为什么 clearfix 仍然值得用
现代布局中 Flexbox 和 Grid 已经能解决大部分浮动导致的父容器塌陷问题，但
并未过时——它仍是处理「局部浮动内容 + 无法改写结构」场景最轻量、兼容性最好的方案。比如维护老项目、第三方组件嵌入、或需要在
容器里混用浮动元素时，
比强行套用 Flex 更稳妥。
它的核心逻辑是利用
伪元素
触发 BFC（块级格式化上下文），同时不干扰原有布局流。相比直接给父元素加
，
不会意外裁剪阴影、下拉菜单、定位偏移内容等。
overflow
: hidden 的隐藏风险
确实能快速让父容器包裹浮动子元素，但它本质是强制创建 BFC，副作用明显：
所有溢出内容（如
脱离文档流的提示框、
、
移出边界的动画）会被裁剪
在 Safari 中可能触发不必要的
重绘
，影响滚动性能
与
或某些 CSS 动画组合时，行为不可预测
无法和
/
混用（
浏览器
会统一降级为
）
推荐的 modern clearfix 写法
不必再用老式
（IE6/7 专属 hack），以下写法覆盖 IE8+ 及所有现代浏览器，语义清晰且无副作用：
立即学习
“
前端免费学习笔记（深入）
”；
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
使用时只需给浮动容器添加 class：
注意点：
不要用
单独清除——它可能在内容前插入空行，影响首行对齐
比
更安全：避免 margin 合并问题，且兼容性更好
如果容器本身有
或
，无需加
——浮动在这些上下文中自动失效
什么情况下该直接放弃浮动
如果你能控制 HTML 结构和浏览器支持范围，优先用原生布局方案替代浮动：
两栏/三栏自适应？用
配合
或
图文环绕？用
+
（仅当真需要文字绕图时保留 float）
响应式网格？用
和
老项目升级？先全局搜索
/
，逐个评估是否可被
或
替代
真正难处理的，往往是那些“只改 CSS 不动 HTML”的紧急修复场景——这时候，一个干净的
类比硬塞
少掉一半线上事故。
clearfixdisplay: inline-blockclearfixoverflow: hiddenclearfixoverflow: hiddenposition: absolutebox-shadowtransformresize: bothoverflow-x: autooverflow-y: visiblehiddenzoom: 1.clearfix::after {
content: "";
display: table;
clear: both;
}
左
右
::beforedisplay: tableblockdisplay: flexdisplay: gridclearfixdisplay: flexflex: 1gapshape-outsidefloatdisplay: gridgrid-template-columns: repeat(auto-fit, minmax(...)))float: leftfloat: rightinline-flextext-alignclearfixoverflow: hidden