17370845950

背景不显示是因为浮动子元素导致父容器高度塌陷为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); }
.item { float: left; width: 200px; }

修复后：

.wrap {
  background: url(bg.jpg);
  display: flow-root; /* 或 overflow: hidden; */
}
.item { float: left; width: 200px; }