父容器高度塌陷导致背景图不显示，因浮动子元素脱离文档流使父容器高度为0px；用display: flow-root触发BFC可彻底解决，兼容现代浏览器；旧版IE需用clearfix伪元素三要素齐全。
背景图不显示或只显示一条细线，根本不是 background-image 写错了，而是父容器高度塌陷为 0px —— 浮动子元素脱离文档流，父容器“看不见”它们，自然没高度可撑起背景。
为什么 background-image 在浮动布局里会消失
浏览器渲染时，background-image 只作用于容器的 content 区域。一旦父容器因浮动子元素导致高度塌陷（computed height: 0px），哪怕你写了 background-image: url(bg.jpg)，它也只会画在一条不可见的线上——视觉上等于没加载。
- DevTools 里选中父容器，看 Computed → height 是不是
0px - Layout 面板中 content 区域是否压成一条线（甚至完全不可见）
- 检查是否有其他样式干扰：比如
background-clip: content-box+padding: 0，会让背景被裁掉
用 display: flow-root 最干净地修复塌陷
这是专为解决此类问题设计的 CSS 属性，触发 BFC（块级格式化上下文），让父容器重新包含所有浮动子元素，且不带来副作用。
-
display: flow-root不会像overflow: hidden那样意外裁剪position: absolute子元素或box-shadow - 不依赖伪元素、不插入额外 DOM 节点、不污染 HTML 结构
- 现代浏览器（Chrome 58+、Firefox 53+、Safari 10.1+、Edge 79+）全部支持；IE 完全不支持，老项目需降级
示例：
.wrap {
background-image: url(bg.jpg);
display: flow-root; /* 关键：一行解决 */
}
.item {
float: left;
width: 200px;
}
兼容旧浏览器时用 clearfix::after
如果必须支持 IE11 或更早版本，::after 伪元素仍是稳妥选择，但必须三要素齐全，缺一不可。
-
content: ""：空字符串也行，但不能省略，否则伪元素不生成 -
display: table：比block更安全，避免 IE8–9 下 margin 折叠引发的 1px 间隙 -
clear: both：必须是both，left或right无法保证清除所有方向浮动
完整写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* IE6–7 hasLayout 兼容，仅当真需要时才加 */
}
别踩 overflow: hidden 这个坑
虽然 overflow: hidden 能触发 BFC 并“看起来”修好了背景，但它本质是靠裁剪溢出内容来实现的，极易埋雷。
- 若子元素用了
position: absolute且超出父容器边界，会被直接切掉 -
box-shadow、transform: translateY(-10px)等偏移效果也可能被裁剪 - 滚动区域被禁用，
overflow: auto更友好，但小屏下可能意外弹出滚动条
所以除非你明确知道内容绝不会溢出，否则别把它当默认解法。
真正关键的不是“怎么加背景”，而是先确认父容器有没有真实高度——所有 background 相关问题，90% 都卡在塌陷这一步。flow-root 是现代项目的首选，而 clearfix 的每个字符都得写对，少一个就白加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
