父元素背景“消失”是因为浮动导致高度坍缩为0px；根本原因是浮动元素脱离文档流，父容器无法感知其尺寸，故computed height为0；解决方案首选display: flow-root（现代无副作用），次选伪元素clearfix（兼容IE8+），慎用overflow:hidden（会裁剪溢出内容）。
父元素背景颜色“消失”，其实是它的 height 被浏览器算成了 0px——浮动元素脱离文档流后，父容器根本“看不见”它们，自然撑不开高度，背景也就无处可画。
float 怎么让父容器高度坍缩成 0
浮动元素（float: left 或 float: right）会从普通文档流中抽离，不再参与父容器的高度计算。哪怕子元素各自高 200px，父容器的 computed height 仍可能是 0，尤其当它内部没有其他非浮动内容（比如纯文本、普通块级元素）时。
- 常见现象包括：
background-color完全不显示；后续兄弟元素向上“塌陷”，紧贴在浮动区域上方；开发者工具里看到height和offsetHeight显示为0或极小值 -
overflow: hidden不是“清除浮动”，而是触发了 BFC（块级格式化上下文），BFC 容器必须包含其内部浮动子元素，并据此重新计算自身高度 - 但
overflow: hidden有副作用：裁剪position: absolute子元素、砍掉box-shadow、干掉滚动条
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 折叠意外压缩了可用高度。
