父容器高度塌陷是因浮动元素脱离文档流导致，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 就白写了。
