父容器背景色“消失”是因浮动导致高度坍缩为0px；浮动元素脱离文档流，父容器无法感知其尺寸，故computed height为0；首选display: flow-root触发BFC解决，次选伪元素clearfix，慎用overflow:hidden。
父容器背景色“消失”，不是样式没生效，是它的 height 被浏览器算成了 0px——浮动元素脱离文档流后，父容器根本“看不见”它们，自然撑不开高度，背景也就无处可画。
float 怎么让父容器高度坍缩成 0
浮动元素（float: left 或 float: right）会从普通文档流中抽离，不再参与父容器的高度计算。哪怕子元素各自高 200px，父容器的 computed height 仍可能是 0，尤其当它内部没有其他非浮动内容（比如纯文本、普通块级元素）时。
- 常见现象包括：
background-color完全不显示；后续兄弟元素向上“塌陷”，紧贴在浮动区域上方；开发者工具里看到height和offsetHeight显示为0或极小值 -
float的设计初衷是文字环绕图片，不是布局工具，所以这种行为是规范定义，不是 bug - 只要子元素用了
float，它就不再占文档流空间，父容器渲染时“以为”里面空空如也
overflow: hidden 为什么能“修好”背景色
overflow: hidden 不是在“清除浮动”，而是触发了 BFC（块级格式化上下文）。BFC 容器必须包含其内部浮动子元素，并据此重新计算自身高度。
- 副作用真实存在：
position: absolute子元素超出父边界会被裁剪（如下拉菜单、tooltip）；box-shadow若落在父容器外也会被砍掉；若父容器本该支持滚动，overflow: hidden会把滚动条干掉 - 仅对块级元素有效——如果父元素是
inline（比如span），得先加display: block或inline-block - 若父元素同时设置了
height或max-height，BFC 的自动撑高能力会被覆盖，背景还是撑不开
display: flow-root 是更干净的现代解法
display: flow-root 是专为解决这类问题设计的 CSS 属性，同样触发 BFC，但不附带溢出裁剪行为——绝对定位子元素照常溢出，阴影照常渲染，滚动逻辑也不受影响。
立即学习“前端免费学习笔记（深入）”；
- 写法就是：
display: flow-root替掉overflow: hidden，其他样式不动 - 兼容性足够：
Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+均原生支持 - 不能和
position: absolute同时用在一个元素上——后者会让flow-root失效 - 如果父容器本身是
inline或inline-block，先确保它已是块级（比如加display: block）再设flow-root
clearfix 有时没效果，往往卡在这几个点
伪元素清除法（如 .clearfix::after）失效，往往不是代码写错了，而是漏掉了关键前提：
-
content: ""不能省——没有内容，伪元素不生成，clear就无效 -
display: table比display: block更稳妥：table自带块级行为且避免margin collapse异常 - 父容器自身得在文档流中（不能是
display: inline，也不能被height: 0或overflow: hidden锁死高度） - IE8+ 可用；若要支持 IE7，需额外加
zoom: 1触发hasLayout
真正卡住人的，往往不是“怎么闭合高度”，而是闭合之后忘了检查父容器是否还有可靠的尺寸锚点——比如图片加载延迟、字体加载未完成、或 margin 折叠意外压缩了可用高度。
