clearfix 是专门闭合浮动子元素的 CSS 工具类，避免父容器塌陷；overflow: hidden 会裁剪绝对定位元素、遮挡阴影等，副作用大，而 clearfix 仅干预浮动流，语义清晰且安全。
clearfix 是什么，为什么不能直接用 overflow: hidden 代替
它是一段专门用来闭合父容器内浮动子元素的 CSS 工具类，核心作用是让父容器能正确包裹住 float 元素。很多人一看到塌陷就加 overflow: hidden，但这个做法会意外裁剪 position: absolute 子元素、遮挡 box-shadow 或影响滚动条行为。
真正安全的做法是复用经过验证的 clearfix 类，它只干预浮动流，不干扰其他布局逻辑。
-
overflow: hidden是“副作用清除”，clearfix是“语义化清除” - IE6/7 需要额外支持
zoom: 1触发 hasLayout，现代写法可省略 - 如果项目已用 Flex 或 Grid 布局，根本不需要
clearfix—— 浮动本身就不该是首选方案
标准 clearfix 写法及各浏览器兼容要点
最稳妥的写法是 micro clearfix（Nicolas Gallagher 版本），它覆盖 IE6+ 到现代浏览器，且不依赖伪元素内容干扰可访问性。
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
注意点：
-
::before和::after必须同时存在，否则 IE8 下可能失效 - 不能写成
:before, :after（单冒号）—— 在 IE8 中伪元素不生效 - 不要给
content设为" "或任意文字，空字符串""才保证无渲染干扰 - 若项目需支持 IE7，需额外加
*zoom: 1（星号 hack，仅 IE7 解析）
什么时候不该用 clearfix
不是所有浮动都需要闭合。盲目加 clearfix 可能掩盖更本质的问题，比如结构不合理或 CSS 权重混乱。
- 父容器本身有固定高度（
height: 200px），塌陷不影响视觉，就不需要 - 浮动元素后面紧跟一个
clear: both的块级元素（如），已自然清除 - 使用
display: inline-block或flex替代浮动实现横向排列，此时clearfix完全无效 - Vue/React 组件中动态插入浮动元素，若父组件未设
class="clearfix"，光靠 CSS 文件引入不会自动生效
现代替代方案：用 display: flow-root 更干净
Chrome 58+、Firefox 57+、Safari 10.1+ 支持 display: flow-root，它是原生的“创建 BFC 并闭合浮动”的属性，比 clearfix 更轻量、无侵入性。
直接写：
.container {
display: flow-root;
}
- 无需伪元素、无需额外 class，一行解决
- 不会像
overflow: hidden那样隐藏溢出内容 - 不兼容 IE 和旧版 Safari，上线前务必查 caniuse 数据
- 和
clearfix不互斥，可以共存作为降级方案
实际项目里最容易被忽略的是：浮动塌陷往往不是孤立问题，而是文档流被多次打断后的连锁反应。检查时优先看父容器是否意外设置了 height: 0、visibility: hidden 或被 transform 移出了文档流 —— 这些比找 clearfix 更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
