父元素背景“消失”是因浮动子元素导致其高度为0；overflow:hidden可临时修复但会裁剪溢出内容；display:flow-root是更优解，触发BFC且无裁剪副作用；clearfix失效常因content缺失或父容器脱离文档流。
父元素背景“消失”，不是样式没生效，是它的 height 被浏览器算成了 0px ——浮动子元素脱离文档流，父容器根本感知不到它们的存在，自然撑不开高度。
为什么 overflow: hidden 能临时修好但不推荐长期用
它触发了 BFC（块级格式化上下文），让父容器重新包含浮动子元素、恢复高度。但副作用真实存在：
-
overflow: hidden会裁剪超出边界的position: absolute子元素（如下拉菜单、tooltip） - 如果父容器有
box-shadow或border-radius，阴影可能被一并砍掉 - 父容器若本该支持滚动（比如内容超长），
overflow: hidden会让滚动条彻底消失 - 对
inline元素无效，必须先加display: block或display: inline-block
display: flow-root 是更干净的现代解法
它是专为解决这类问题设计的 CSS 值，同样触发 BFC，但不附带溢出裁剪行为：
- 直接给父容器加
display: flow-root，无需伪元素、无需额外 HTML - 兼容性足够：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更稳妥：自带块级行为，还能避免 margin collapse 异常 - 父容器自身必须在文档流中——不能是
display: inline，也不能被height: 0或overflow: hidden锁死高度 - IE8+ 可用；若要支持 IE7，需额外加
zoom: 1触发 hasLayout
真正卡住人的，往往不是“怎么闭合高度”，而是闭合之后忘了检查父容器是否还有可靠的尺寸锚点
比如图片加载延迟、字体加载未完成、或 margin 折叠异常导致父容器实际仍无法撑开。修复完 float 塌陷后，务必用开发者工具确认父容器的 offsetHeight 和 computed height 是否已非零——否则背景依然不会出现。
