这是父容器高度塌陷问题：浮动子元素导致父容器高度为0，background-image只能在0高度内渲染。解决方法是触发bfc，如overflow:hidden，或改用flex/grid布局。
background-image 在浮动容器里只显示一半？
这是典型的父容器高度塌陷问题：子元素全浮动后，父容器无法感知内容高度，background-image 只能渲染在“视觉上不存在”的 0 高度区域里，看起来像被截断或重复错位。
根本不是 background-repeat 的锅，而是容器没高度 —— 所以调 background-size 或改 repeat 都是白忙。
- 别用
height: auto+ 浮动混搭，除非你手动撑高父容器 - 检查浏览器开发者工具的 computed height，如果显示
0px，基本就是这个原因 - 旧项目还在用
float: left布局时，必须配套清除浮动逻辑
clear: both 不起作用？试试 overflow: hidden
clear: both 是加在浮动元素**后面**的兄弟元素上的，不是加在父容器上——很多人误写在父元素上，自然无效。
真正让父容器“包含”浮动子元素的，是触发 BFC（块级格式化上下文）。overflow: hidden 是最轻量、兼容性最好的方式（IE6+ 支持）。
- 给父容器加
overflow: hidden或overflow: auto，背景图立刻填满整个可视区域 - 慎用
overflow: scroll，会强制出现滚动条，影响布局 - 如果父容器本身需要溢出内容可见，改用
display: flow-root（现代浏览器支持，IE 不支持）
float 布局还在用，但 background-image 老是平铺错位
浮动本身不控制背景绘制区域，背景始终基于容器的 border box。当容器高度塌陷，background-image 就只能在 0 高度内反复平铺——看起来像密集重复、拉伸失真或完全看不见。
关键不是换 background-repeat 值，而是先确保容器有真实高度。
- 避免在浮动父容器里直接设
background-image，除非你同时 fix 了高度塌陷 - 如果必须兼容老浏览器，用伪元素清除法：
::after { content: ""; display: table; clear: both; } - 用
background-attachment: local会加剧错位感，因为背景随内容滚动而“撕裂”，浮动布局下尤其明显
现代写法要不要彻底放弃 float？
是的，但不是因为清除浮动麻烦，而是 float 本意是文字环绕图片，不是做布局。现在用 display: flex 或 display: grid，父容器天然包含子项，background-image 渲染完全可控。
- Flex 容器默认不塌陷，加
background-image直接生效，无需任何清除操作 - Grid 同理，且支持
place-items等语义化对齐，比float + clear组合更稳定 - 唯一要注意的是：flex/grid 容器若设了
min-height: 0或overflow，可能意外截断背景，需检查 computed styles
浮动清除的本质，是补上那个被浏览器“忽略”的高度。很多人试了七八种 clear 写法没用，其实是加错了位置；也有人用 height: 1px 强撑，结果响应式一缩就露馅。真正稳的，永远是让容器自己重新“看见”子元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
