父容器高度塌陷为0px是因浮动子元素脱离文档流，现代首选display: flow-root触发bfc解决；传统可用clearfix伪元素法；overflow:hidden有裁剪等副作用，应避免。
背景颜色“消失”不是样式没生效，是父容器高度塌陷成了 0px —— 浮动子元素脱离文档流，浏览器压根不把它算进父容器高度里。
为什么 float 会让父容器高度变成 0
浮动元素（float: left 或 float: right）会从普通文档流中抽离。哪怕子元素各自高 200px，只要父容器内部没有其他非浮动内容（比如纯文本、div、p 等块级元素），它的 computed height 就可能退化为 0。
开发者工具里能看到：offsetHeight 是 0 或极小值；后续兄弟元素向上“塌陷”，紧贴在浮动区域上方；背景色只在文字基线附近闪一下，甚至完全不可见。
现代项目首选 display: flow-root
这是专为解决高度塌陷设计的 CSS 属性，它触发 BFC（块级格式化上下文），让父容器重新包含浮动子元素，且不附带副作用。
-
display: flow-root不会裁剪position: absolute子元素，也不砍掉box-shadow或滚动条 - 兼容性足够：Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+ 均原生支持
- 不能和
position: absolute同时用在一个元素上——后者会让flow-root失效 - 如果父容器原本是
inline或inline-block，得先加display: block再设flow-root
伪元素 ::after 清除法（兼容 IE8+）
这是最稳妥的传统方案，但细节容易翻车：
-
content: ""不能省——没内容，伪元素根本不生成 - 必须写
display: table（比block更稳），display: inline会导致clear失效 - 父容器自身得在文档流中：不能是
display: inline，也不能被height: 0或overflow: hidden锁死高度 - IE7 需额外加
zoom: 1触发 hasLayout，但现代项目基本不用管
标准写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
别再用 overflow: hidden 硬撑了
它确实能触发 BFC、让背景显示出来，但副作用明显：
- 会裁剪
position: absolute子元素的溢出部分 - 可能意外砍掉
box-shadow或圆角效果 - 如果内容真超出了，滚动条不会出现（
hidden），或者会多出不需要的滚动条（auto） - 老项目里若已有
max-height或height，BFC 的自动撑高能力会被覆盖
真正卡住人的，往往不是“怎么撑开高度”，而是撑开之后忘了检查父容器是否还有可靠的尺寸锚点——比如图片加载延迟、字体未就绪导致重排、或外边距折叠压缩了可用高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
