父容器高度塌陷是因浮动元素脱离文档流导致，clearfix通过伪元素触发BFC并清除浮动来解决；标准写法为.clearfix::after{content:"";display:table;clear:both}，需注意兼容性与display设置。
为什么父容器高度塌陷了
浮动元素脱离文档流，父容器没内容撑开，高度就变成0。这不是bug，是CSS规范行为。常见现象：div里放几个float: left的img或section，结果父div在开发者工具里显示高度为0，背景色、边框全没了。
用overflow: hidden能临时解决，但会意外裁剪溢出内容；用clear: both加空标签又污染结构。真正干净的做法，是让父容器自己“感知”到浮动子元素的存在。
clearfix伪元素怎么写才有效
核心是触发BFC（块级格式化上下文），同时不引入额外DOM节点。标准写法必须包含两个关键点：伪元素生成、clear: both、以及content非空值。
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意这几点：
立即学习“前端免费学习笔记（深入）”；
-
content不能是none或空字符串（某些老IE不认""，但现代浏览器没问题） -
display: table比block更稳妥——它天然创建BFC，且不会引发IE6/7的双倍边距bug - 必须用
::after，不是:after（虽然多数浏览器兼容，但::才是CSS3伪元素标准写法） - 别漏掉
clear: both，否则伪元素只是个空盒子，起不到清除作用
为什么有些clearfix写法在Flex/Grid里失效
当父容器本身用了display: flex或display: grid，再套clearfix完全没用——因为浮动在Flex/Grid容器里本来就不影响布局流，clear属性也失去意义。
这时候该怎么做：
- 如果子元素本就不需要浮动，直接删掉
float，用flex或grid原生对齐 - 如果必须保留浮动（比如兼容旧代码），那就别把父容器设成
flex或grid，二者不共存 - 别试图给
flex容器加clearfix类，它不会报错，但也不会生效
移动端和IE8+兼容要注意什么
现代项目基本不用管IE6/7，但IE8仍需注意::after支持不完整，必须用单冒号:after写法；另外display: table在IE8中表现稳定，比display: block加zoom: 1更简洁。
推荐兼顾写法：
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
这样写：
- IE8支持
:before/:after，但不支持::双冒号 -
display: table在:before也写上，是为了防止某些极端场景下:after被覆盖或忽略 - 不用
zoom: 1触发hasLayout——display: table已足够
真要支持IE7及以下，就得回退到加空标签或overflow: hidden，但代价是放弃语义和灵活性。
最常被忽略的是：伪元素默认是inline，如果只写clear: both却不设display，它根本清不了浮动。这个细节一漏，整个clearfix就白写了。
