父容器高度塌陷为0px是因浮动元素脱离文档流，不参与高度计算；可用overflow:hidden（触发bfc但会裁剪）、display:flow-root（现代推荐，无裁剪）或clearfix伪元素修复。
背景颜色“不显示”，其实是父容器高度塌陷成了 0px，不是样式没生效，是没地方画。
float 怎么让父容器 height 变成 0
浮动元素（float: left 或 float: right）会从普通文档流中抽离，不再参与父容器的高度计算。哪怕子元素各自高 200px，只要父容器内部没有其他非浮动内容（比如纯文本、div、p），它的 computed height 就可能是 0。
常见现象包括：
-
background-color完全不可见 - 后续兄弟元素向上“塌陷”，紧贴在浮动区域上方
- 开发者工具里看到
height和offsetHeight显示为0或极小值
overflow: hidden 能闭合但会裁剪内容
它触发 BFC（块级格式化上下文），让父容器重新包含浮动子元素，从而恢复高度。但它本意不是“清浮动”，只是副作用可用。
容易踩的坑：
-
position: absolute子元素（如下拉菜单、tooltip）会被裁剪 -
box-shadow或border-radius溢出部分可能被砍掉 - 父容器若本该支持滚动，
overflow: hidden会让滚动条彻底消失 - 对
inline元素无效——必须先加display: block或display: inline-block - 如果父容器同时设置了
height或max-height，BFC 的自动撑高能力会被覆盖
display: flow-root 是更干净的现代解法
它是专为解决这类问题设计的 CSS 值，同样触发 BFC，但不附带溢出裁剪行为。
使用时注意：
- 写法就是直接加
display: flow-root，其他样式不动 - 兼容性足够：Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+
- 不能和
overflow: hidden同时用在一个元素上——后者会让flow-root失效 - 如果父容器原本是
inline或inline-block，得先确保它是块级（比如加display: block）再设flow-root
clearfix 伪元素为什么有时没效果
失效往往不是代码写错了，而是漏掉了关键前提：
-
content: ""不能省——没有内容，伪元素根本不生成，clear就无效 -
display: table比display: block更稳妥：自带块级行为，还能避免 margin collapse 异常 - 父容器自身得在文档流中（不能是
display: inline，也不能被height: 0或overflow: hidden锁死高度） - IE8+ 可用；若要支持 IE7，需额外加
zoom: 1触发 hasLayout
真正卡住人的，往往不是“怎么闭合高度”，而是闭合之后忘了检查父容器是否还有可靠的尺寸锚点——比如图片加载延迟、字体加载未完成、或 margin 折叠意外压缩了可用高度。修复完 float 塌陷后，务必用开发者工具确认父容器的 offsetHeight 和 computed height 是否已非零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
