父元素高度塌陷是因浮动元素脱离文档流，导致父容器无法正确计算高度；clearfix需满足content非空、display为block/table、父元素无overflow隐藏；现代推荐用display: flow-root。
为什么父元素高度会塌陷
浮动元素脱离文档流，父容器计算高度时直接“看不见”它们，导致高度变成0或远小于预期。这不是bug，是CSS规范定义的行为——但实际开发中它总在你最不想的时候冒出来，比如导航栏突然压扁、卡片布局错位。
clearfix伪元素怎么写才真正生效
很多人复制粘贴一段.clearfix::after代码就以为万事大吉，结果发现没用。关键在三个细节：
-
content必须是非空字符串（哪怕只写""），设为none或不写都会失效 - 必须声明
display: table或display: block，inline不行 - 父元素不能有
overflow: hidden或auto等隐藏溢出的设置——它会干扰伪元素的清除效果
推荐写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
现代项目里还该用clearfix吗
不一定。如果你的布局场景满足以下任一条件，clearfix反而是绕远路：
立即学习“前端免费学习笔记（深入）”；
- 父容器可以用
display: flex或display: grid——它们天然包含BFC，浮动不会影响高度 - 浮动仅用于图文环绕（比如
img左浮文字绕排），根本不需要父容器撑高 - 项目已全局启用
display: flow-root（Chrome 64+/Firefox 58+支持）——一行解决：parent { display: flow-root; }
flow-root是目前最干净的替代方案，它创建新BFC且不影响子元素布局行为，比overflow: hidden更安全。
容易被忽略的兼容性陷阱
IE8及以下不支持::after伪元素（只认:after），如果还要兼容，得写双冒号+单冒号两遍；但更现实的问题是：
- 某些CSS预处理器（如早期Less）会把
::after自动编译成:after，导致现代浏览器下伪元素重复触发 -
clear: both对flex子项无效——别在flex容器里混用浮动和clearfix - Vue/React组件中动态添加class时，若
clearfix类名被SSR提前注入但样式未加载，会出现闪动塌陷
真正在意兼容性时，别只盯着IE，多看看构建工具和框架对伪元素的实际处理逻辑。
