父容器高度塌陷是根本原因，因浮动子元素脱离文档流致computed height为0px，背景图在不可见区域被缩放/裁剪；display: flow-root为首选解法，创建bfc且无副作用，但需浏览器支持（chrome64+/firefox62+/safari15.4+/edge16+，ie全不支持）。
父容器高度塌陷是根本原因，不是图片或路径问题
浮动子元素脱离文档流，导致父容器 computed height 为 0px，背景图只能渲染在“看不见”的区域里。你看到的“截断”，其实是背景图在 0 高度内被强制缩放、重复或裁剪——background-image 本身完全正常。
display: flow-root 是首选，但得看浏览器支持范围
它专为解决此问题设计：创建 BFC，让父容器正确包含浮动子元素，且不裁剪 position: absolute 元素、不干扰 border-radius 渲染、不改变盒模型行为。
-
.container { display: flow-root; }就够了，无需额外伪元素或overflow - Chrome 64+ / Firefox 62+ / Safari 15.4+ / Edge 16+ 支持；IE 全版本不支持
- 别和
overflow: hidden混用——后者会覆盖前者，反而触发裁剪 - 如果父容器是
display: inline或inline-block，先加display: block，否则flow-root不生效
overflow: hidden 能用，但副作用必须提前确认
它通过触发 BFC “绕过”塌陷，效果立竿见影，但不是清除浮动，而是让浏览器重新计算包含区域。
-
.container { overflow: hidden; }兼容 IE6+，最稳妥的降级方案 - 会裁剪所有溢出内容：下拉菜单、tooltip、
box-shadow、transform偏移元素都可能被切掉 - 配合
border-radius使用时，圆角裁剪行为在旧版 Safari/Edge 中不稳定 -
overflow: auto在 iOS Safari 12–14 下可能误出横向滚动条，优先选hidden
伪元素 clearfix 还得会，尤其要避开三个常见错写
适用于需兼容 Safari 10.3 之前、IE11 等场景，但写法差一点就失效。
- 必须三要素齐全：
content: ""、display: table（比block更稳）、clear: both - 错误：直接给父容器加
clear: both—— 它只对“紧跟在浮动元素之后”的兄弟元素生效 - 错误：伪元素写成
display: block且父容器是inline—— 伪元素不渲染，清除失败 - 老项目若仍需支持 IE6/7，得补
zoom: 1触发 hasLayout
background-size: cover 缩放异常——这时候问题已经不在浮动上，而是 background-attachment、background-origin 或父容器缺乏明确宽高锚点。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
