背景不显示是因为浮动子元素导致父容器高度塌陷为0，使背景仅作用于不可见区域；解决方法是让父容器正确包裹浮动元素，推荐使用display: flow-root或overflow: hidden。
浮动元素会导致父容器高度塌陷，背景图片自然无法正常显示——因为父容器实际高度可能为0。解决方法不是“先清除浮动再设置背景”，而是让父容器正确包裹浮动子元素，背景才能按预期渲染。
为什么背景不显示？
当子元素全部浮动后，父容器失去高度参考，表现为“高度为0”。此时即使设置了 background-image，也只作用于一个看不见的窄条区域（比如只有padding撑开的一点空间），视觉上就像背景消失了。
推荐的清除浮动方式
不用额外空标签或伪元素 hack，现代写法直接给父容器添加：
- overflow: hidden;（最简洁，兼容性好，适合无溢出需求的场景）
- display: flow-root;（语义清晰、无副作用，推荐用于新项目）
-
使用 ::after 清除（传统稳妥）：
.parent::after { content: ""; display: table; clear: both; }
设置背景前的关键检查项
确保背景能正常显示，还需确认以下几点：
立即学习“前端免费学习笔记（深入）”；
- 父容器有明确的宽高（或内容/内边距撑开）
- background-image 路径正确，且图片资源可访问
- 没有其他 CSS（如 background-color 完全覆盖了图片）干扰显示
- 未对父容器设置 background-clip: content-box 且 padding 为 0，导致背景被裁掉
一个典型修复示例
原问题代码：
.wrap { background: url(bg.jpg); }<br>.item { float: left; width: 200px; }修复后：
.wrap {<br> background: url(bg.jpg);<br> display: flow-root; /* 或 overflow: hidden; */<br>}<br>.item { float: left; width: 200px; } 
