父容器高度塌陷导致背景图被裁切，本质是浮动使父容器无法感知子元素高度；正确清除浮动需在浮动子元素后插入clear:both的块级元素，或用display:flow-root/overflow:hidden触发bfc。
父容器高度塌陷导致背景图被裁切
浮动元素脱离文档流，父容器无法感知子元素高度，实际高度变成 0 或仅含内边距/文字行高，背景图自然只显示在“看不见的高度”上——这不是背景图问题，是父容器没高度。
clear: both 不是万能解，得看加在哪
clear: both 本身不撑高父容器，它只是让某个元素避开浮动，所以必须加在一个**位于浮动子元素之后、且仍在父容器内的块级元素**上。常见错误是加在浮动子元素自己身上，或加在父容器上（无效）。
- ✅ 正确：在最后一个浮动子元素后面插入
<div style="clear:both"></div> - ❌ 错误：给浮动子元素加
clear: both（它前面没浮动，clear 无意义） - ❌ 错误：给父容器加
clear: both（clear 对父容器自身不生效）
更稳妥的现代方案：触发 BFC 或用 display: flow-root
靠 clear 插空 div 是历史写法，易遗漏、语义差。推荐直接让父容器形成 BFC，自动包含浮动子元素：
- ✅
overflow: hidden（最常用，但可能意外裁剪阴影或下拉菜单） - ✅
display: flow-root（专为此设计，无副作用，Chrome 64+/Firefox 62+ 支持） - ✅
float: left或position: absolute（会改变父容器定位上下文，慎用）
例如：
.parent { display: flow-root; background-image: url(bg.jpg); }
Flex/Grid 布局下根本不用清浮动
如果父容器已设 display: flex 或 display: grid，子元素即使声明 float 也会被忽略——此时浮动失效，高度自然由 Flex/Grid 自动计算，背景图完整显示。
但要注意：这属于“绕过问题”，不是“解决浮动”。若业务逻辑依赖浮动（比如图文环绕），就不能靠 Flex/Grid 来掩盖，得回归清除或 BFC 方案。
真正容易被忽略的是：display: flow-root 兼容性虽好，但在 IE 完全不支持；而 overflow: hidden 看似简单，一旦父容器有 border-radius + overflow: hidden + 子元素 position: absolute，圆角裁剪行为可能和预期不一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
