浮动导致父容器高度塌陷，使背景图视觉错位；需用clearfix清除浮动、设background-origin为content-box或padding-box并配box-sizing:border-box。
浮动元素会脱离文档流，导致父容器高度塌陷，进而让背景图“悬空”或位置偏移——这不是背景图本身跑偏了，而是它所在的容器没撑开，视觉上看起来错位了。
确认 background-origin 是否影响显示范围
如果给浮动容器设置了 padding，又没调整 background-origin，背景图默认从 padding-box 开始绘制（即含内边距区域），但内容被浮动抽走后，padding 区域可能“空着”，造成背景图位置与预期不符。
- 想让背景图紧贴内容边缘：设
background-origin: content-box - 想让背景图铺满整个盒区（含 padding）：保持默认
padding-box，但需确保父容器高度正常 - 检查是否误用了
background-clip，它控制裁剪范围，和 origin 容易混淆
用 clearfix 清除浮动，恢复父容器高度
背景图挂在父容器上，而父容器因内部浮动塌陷变高为 0，背景自然“缩成一条线”。必须让父容器重新包裹住浮动子元素。
- 在父容器末尾加一个清除浮动的空元素：
- 更推荐用伪元素 clearfix（不污染 HTML）：
.clearfix::after {
content: ""; display: table; clear: both;
}
然后给父容器加上 class="clearfix" 即可稳定高度，背景图随之回归正常位置。
立即学习“前端免费学习笔记（深入）”；
检查 padding 和 box-sizing 是否协同生效
浮动本身不直接影响 padding，但如果父容器设置了 padding 又没配 box-sizing: border-box，实际尺寸会超出预期，尤其在响应式布局中容易引发背景图边缘错位。
- 统一使用
box-sizing: border-box，让 padding 包含在 width/height 内 - 避免在浮动容器上直接设大 padding，优先通过子元素 margin 或内层 wrapper 控制留白
- 用浏览器开发者工具选中父容器，看 computed 面板中 “height” 是否为 0 —— 是则肯定浮动未清除
基本上就这些。浮动+背景图的问题，核心不在背景本身，而在容器是否真正“存在”。清浮动、控 origin、理 box 模型，三者到位，背景图就稳了。
