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