父容器背景色“不显示”是因高度塌陷为0px，浮动元素脱离文档流导致父容器无法计算高度；首选display: flow-root触发BFC修复，无裁剪副作用，兼容现代浏览器。
背景色“不显示”，是因为父容器高度塌陷成了 0px，不是样式没生效，是根本没空间可画。
float 怎么让父容器 height 变成 0
浮动元素（float: left 或 float: right）会从普通文档流中抽离，不再参与父容器的高度计算。哪怕子元素各自高 200px，只要父容器内部没有其他非浮动内容（比如纯文本、<p>、未浮动的 <div>），它的 computed height 就可能是 0。
常见现象包括：
-
background-color完全不可见 - 后续兄弟元素向上“塌陷”，紧贴在浮动区域上方
- 开发者工具里看到
height和offsetHeight显示为0或极小值
display: flow-root 是最干净的修复方式
它专为解决这类问题设计，触发 BFC 但不附带副作用：
立即学习“前端免费学习笔记（深入）”；
- 写法就是直接加
display: flow-root到父容器，其他样式不动 - 不会裁剪
position: absolute子元素、box-shadow或border-radius溢出部分 - 兼容性足够：
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
别再靠清除浮动修背景了
现代项目里，真正该做的不是“清浮动”，而是换掉浮动：
-
display: flex容器里的子元素，即使写了float: left也会被忽略，高度自动由 Flex 算出 -
display: grid同理，二维布局更稳，响应式也更直观 - 混用
float和flex/grid很危险：float元素在flex容器里仍会脱离流，导致高度再次塌陷 - 修复完 float 塌陷后，务必检查父容器是否还有可靠的尺寸锚点——比如图片加载延迟、字体加载未完成、或
margin折叠意外压缩了可用高度
