父容器高度塌陷导致背景图不显示，根源是浮动元素脱离文档流；display: flow-root 是最干净的修复方式，可触发BFC重新包含浮动子元素。
不是背景图片“不显示”，是父容器高度塌陷为 0px，导致背景图没空间渲染——所有浏览器都这样，不是兼容性问题，而是 CSS 浮动的规范行为。
浮动让父容器高度变成 0，背景自然画不出来
浮动元素（float: left 或 float: right）会脱离文档流，父容器在计算自身高度时直接忽略它们。结果就是：即使子元素明明占了 300px 高，父容器的 height 在 computed 样式里仍显示为 0。
- 用开发者工具选中父容器，看
Computed → height是不是0px，这是最直接的判断依据 - 常见于导航栏、图文混排卡片、老式多列布局等场景
- 不是图片路径错、不是格式不支持、也不是缓存问题——这些都得先排除，但根源永远是高度塌陷
display: flow-root 是目前最干净的修复方式
display: flow-root 显式触发 BFC（块级格式化上下文），让父容器重新包含浮动子元素，且不改变溢出行为、不裁剪 position: absolute 子项、不引入额外 DOM 或伪元素。
- 兼容 Chrome 64+ / Firefox 58+ / Safari 15.4+，2026 年已覆盖绝大多数真实用户
- 写法极简：
.parent { display: flow-root; }，之后再设background-image就能正常铺开 - 比
overflow: hidden安全：后者可能意外裁剪阴影、下拉菜单或 tooltip - 比
::after清除更稳定：不受display: inline父容器、transform或 CSS 重置库影响
伪元素清除（clearfix）容易失效的三个隐藏条件
经典 .clearfix::after 方案看似可靠，但实际常因上下文干扰而静默失效。
立即学习“前端免费学习笔记（深入）”；
- 父容器本身是
display: inline或inline-block—— 伪元素默认 inline，无法撑高，必须显式加display: block - 父容器设置了
overflow: hidden或auto—— 会提前截断布局流，使clear: both失效 - 父容器有
margin-bottom，而伪元素是display: block—— 触发外边距合并，视觉上像“没撑开”
背景图仍不显示？检查这几个非浮动相关因素
即使高度修复了，背景图也可能因其他原因不可见。
-
background-image路径始终相对于 CSS 文件位置，不是 HTML 文件 —— 比如 CSS 在css/style.css，图片在images/bg.jpg，必须写url("../images/bg.jpg") - 父容器没设置
min-height或内容撑不开尺寸，比如空容器 +padding: 0，背景就只作用于一条线 -
background-attachment: fixed在含浮动的容器里滚动异常，建议改用scroll或移出浮动上下文 - 某些旧版 Edge 对
background-origin: border-box和浮动共存支持差，可显式设为padding-box
真正卡住人的，往往不是怎么清浮动，而是修完高度后忘了浮动还在影响 margin-collapse、z-index 层级或文本环绕逻辑——背景图只是第一个暴露问题的表象。
