浮动导致父容器高度塌陷，使背景无法显示；可通过设固定高度、触发BFC（如overflow:hidden）、clearfix清除浮动或改用Flex/Grid布局解决。
浮动元素会脱离文档流，导致父容器无法正确计算高度，背景自然就“消失”了——这不是背景真没了，而是父容器高度塌陷，背景没地方可显示。
给父容器设置固定高度（最简单但不推荐）
如果内容高度固定且不会变，直接写 height: 200px 能立刻让背景出现。但一旦内容增减，就会溢出或留白，维护性差，适合极简静态模块。
触发BFC（推荐的通用解法）
BFC（块级格式化上下文）能让容器包含内部浮动元素，自动撑开高度。只需给父容器加一个能触发BFC的CSS属性：
-
overflow: hidden（最常用，兼容性好） -
overflow: auto（滚动条可能意外出现，慎用） -
display: flow-root（现代标准写法，语义清晰，Chrome 58+/Firefox 57+ 支持） -
float: left或position: absolute（会改变布局定位，一般不用）
使用clearfix清除浮动（传统兼容方案）
在父容器末尾插入一个清除浮动的伪元素，不干扰结构又兼容老浏览器：
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: table;
clear: both;
}
然后给父容器添加 class="clearfix" 即可。这是IE6–8时代的经典方案，至今仍可靠。
改用Flex或Grid布局（面向未来的替代方式）
浮动本就不是为布局设计的，现代项目建议直接放弃浮动做整体布局：
- 父容器设
display: flex，子项自动排列且父容器正常撑高 - 用
display: grid同样无塌陷问题，控制更灵活
只需移除 float，换上弹性布局，背景显示问题连同浮动带来的各种副作用一并解决。
不复杂但容易忽略，关键在于理解“塌陷”本质——不是背景丢了，是父容器不知道自己该有多高。
