父容器背景不显示的根本原因是浮动导致高度塌陷，应优先用 display: flow-root 创建 BFC 包含浮动子元素；若需兼容旧浏览器则用 clearfix；长远应改用 flex 或 grid 替代 float。
背景颜色不显示，大概率不是 background 写错了，而是父容器高度塌陷为 0 —— 浮动子元素脱离文档流，父容器“感知不到”它们的存在。
为什么 float 会让 background 消失
浮动元素（float: left 或 float: right）会脱离普通文档流，导致其父容器无法自动计算高度。即使你写了 background-color: #eee，父容器的 offsetHeight 可能仍是 0，根本没空间渲染背景。
常见现象包括：
- 两栏布局中，左侧
float: left、右侧float: right，父div背景色完全看不见 - 开发者工具里看到父容器在 Elements 面板中“有内容”，但 Computed 面板中
height和min-height都是 0 - 加了
clear: both的空div后背景出现，但布局变复杂、语义混乱
用 display: flow-root 启用 BFC 最干净
display: flow-root 是专为解决此问题设计的 CSS 值，它会创建一个新的块级格式化上下文（BFC），让父容器能正确包含浮动子元素，同时不破坏溢出行为、不裁剪 position: absolute 子项或 box-shadow。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 直接给浮动容器的父元素加
display: flow-root，无需伪元素、无需额外 HTML - 兼容性足够：Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+；老项目需兼容 IE，则退回到
clearfix - 不要和
overflow: hidden混用——后者虽也能触发 BFC，但会意外裁剪内容 - 如果父容器本身是
inline或inline-block，先确保它已是块级（比如加display: block）再设flow-root
当必须用 clearfix 时，关键三要素不能少
网上很多 clearfix 写法失效，是因为漏掉了核心条件。最简可靠版本如下：
.clearfix::after {
content: "";
display: table;
clear: both;
}
必须满足：
-
content: ""不能省——没有内容，伪元素不生成，清除无效 -
display: table比block更稳妥：table 自带块级行为且避免 margin collapse 异常 - 父容器自身得在文档流中（不能是
display: inline，也不能被height: 0或overflow: hidden锁死高度） - IE8+ 可用；若要支持 IE7，需额外加
zoom: 1触发 hasLayout
修完背景后，浮动还在影响其他地方
加了 flow-root 或 clearfix 后背景是出来了，但浮动本身并未消失——它仍在干扰周围元素：
- 相邻块级元素的
margin不再折叠（margin collapse 失效） -
z-index计算可能异常，尤其当子元素用了position: relative或absolute -
getBoundingClientRect()返回的尺寸可能与视觉不符 - 父容器若后续要用
flex或grid布局，浮动子项会表现不可控
真正该做的，不是“修背景”，而是换掉浮动：两栏用 display: flex，多列用 display: grid，这才是现代写法下背景不消失的根本解法。
