父容器高度塌陷导致背景色不显示，需用clearfix修复；其生效须满足伪元素存在、display为table/block、父容器在文档流中，且content不可省略。
背景色不显示，不是 CSS 写错了，是父容器高度塌陷为 0px，根本没空间画背景。用 clearfix 能修，但必须满足三个条件：伪元素存在、display 值正确、父容器自身处于文档流中。
为什么 .clearfix::after 有时不生效
常见现象：加了 class="clearfix"，背景还是看不见；开发者工具里看到父容器 offsetHeight 仍是 0。
-
::after伪元素默认是inline，而clear: both对inline元素无效——必须显式设display: table或block - 父容器若本身是
display: inline或inline-block，::after可能不渲染，得先改display: block - IE6/7 不支持
::after，需额外加zoom: 1触发 hasLayout（老项目才需） - 如果父容器有
height: 0、min-height: 0或overflow: hidden且内容溢出被裁，clearfix也救不了
最小可靠 clearfix 写法
不是所有网上抄来的 clearfix 都能用。以下是最小可运行版本，兼容 IE8+ 和现代浏览器：
.clearfix::after {
content: "";
display: table;
clear: both;
}
关键点：
-
content: ""不能省——没内容，伪元素不生成 -
display: table比block更稳妥：table自带clear行为，且不会和浮动子项产生 margin collapse 异常 - 不要写
display: flex或grid在::after上——它们不触发清除逻辑 - 父容器无需额外
zoom或hasLayout，除非要兼容 IE7 及更早
clearfix 和 overflow: hidden 到底选哪个
两者都能撑开高度，但副作用完全不同：
-
overflow: hidden会裁剪position: absolute子元素、box-shadow、transform溢出部分，调试时容易漏掉 -
overflow: auto安全些，但内容稍一超宽就会出滚动条，视觉突兀 -
clearfix不改变溢出行为，也不影响 z-index 层级或定位基准，语义上就是“清浮动”，更可控 - 但如果父容器本身需要响应式高度（比如随子内容伸缩），又用了
position: sticky或inset，clearfix更少意外干扰
真正容易被忽略的不是怎么加 clearfix，而是加完之后浮动还在——它依然会让相邻块级元素的 margin 不折叠、让 z-index 计算变复杂、甚至影响 JS 获取 getBoundingClientRect() 的结果。修背景只是第一步，得再扫一眼周围元素是否表现如预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
