父容器背景色“消失”是因浮动子元素脱离文档流导致高度塌陷为0px；overflow: hidden通过触发BFC临时修复但会裁剪溢出内容、影响阴影和滚动；display: flow-root是更优解，专为解决此问题设计且无裁剪副作用；clearfix失效常因content为空、display未设table或父容器不在文档流中。
父容器背景色“消失”，不是 background 没生效，是它的 height 被浏览器算成了 0px——浮动子元素脱离文档流，父容器根本感知不到它们的存在。
为什么 overflow: hidden 能临时修复但有副作用
它触发了 BFC（块级格式化上下文），让父容器重新包含浮动子元素、恢复高度。但这不是“清除浮动”的本意，只是副作用可用。
-
overflow: hidden会裁剪超出边界的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，无需伪元素、无需额外 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 是否已非零。
