浮动元素导致父容器高度塌陷，使背景图显示区域变短；应通过清除浮动（如overflow:hidden或::after伪元素）解决，而非z-index。
浮动元素遮挡背景图的典型现象
页面中给父容器设置了 background-image，但内部用了 float: left 或 float: right 的子元素后，下方内容“看不见”背景图——不是图没加载，而是父容器高度塌陷，导致背景绘制区域变短，视觉上像被浮动元素“盖住”了。
清除浮动比 z-index 更根本
z-index 对浮动元素无效，因为浮动元素不参与层叠上下文（除非触发了新的层叠上下文，比如加了 position: relative），强行加 z-index 不解决根本问题。真正要做的，是让父容器“感知”到浮动子元素的高度。
- 用
overflow: hidden（或auto）是最轻量的方案，但要注意会裁剪溢出内容 - 在浮动元素末尾加一个带
clear: both的空<div>仍有效，但语义差 - 推荐现代写法：父容器加
::after伪元素清除，兼容性好且无额外 DOM
.container::after {
content: "";
display: table;
clear: both;
}
什么时候才需要 z-index？
只有当浮动元素本身有 position: relative/absolute/fixed，且你确实想让它浮在背景图上方（比如悬浮按钮、装饰角标），这时才用 z-index 控制层级。但必须注意：
- 父容器不能是
overflow: hidden，否则会裁剪掉高z-index元素 - 背景图所在元素（通常是父容器）最好显式设
position: relative，避免层叠上下文混乱 - 不要给浮动元素直接设
z-index而不加position，这会被浏览器忽略
检查是否真被“遮挡”的快速判断法
打开浏览器开发者工具，选中背景图所在的容器，在 Styles 面板里看 computed height 是否为 0 或远小于预期；再 hover 浮动元素，看它的 bounding box 是否超出父容器范围。如果父容器高度塌陷，那就是清除浮动的问题；如果高度正常但背景还是不显示，再查 background-clip、background-origin 或是否被其他元素用 background-color 盖住了。
立即学习“前端免费学习笔记（深入）”；
