背景不显示是因为浮动子元素导致父容器高度塌陷为0，使背景仅作用于不可见区域；解决方法是让父容器正确包裹浮动元素，推荐使用display: flow-root或overflow: hidden。
浮动元素会导致父容器高度塌陷，背景图片自然无法正常显示——因为父容器实际高度可能为0。解决方法不是“先清除浮动再设置背景”，而是让父容器正确包裹浮动子元素，背景才能按预期渲染。
当子元素全部浮动后，父容器失去高度参考，表现为“高度为0”。此时即使设置了 background-image，也只作用于一个看不见的窄条区域（比如只有padding撑开的一点空间），视觉上就像背景消失了。
不用额外空标签或伪元素 hack，现代写法直接给父容器添加：
确保背景能正常显示，还需确认以下几点：
立即学习“前端免费学习笔记（深入）”；
原问题代码：
.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; }
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
900
收藏
