display: flow-root是解决浮动导致父容器高度塌陷最干净的方案，它通过创建bfc使父容器正确包含浮动子元素高度，不裁剪溢出、无副作用，现代浏览器广泛支持但ie完全不兼容。
因为浮动元素脱离文档流，父容器计算高度时直接忽略它们，实际高度退化为 0 或仅含内联内容（比如 <h4></h4> 的行高），背景图自然没空间渲染——这不是图片路径或样式写错了，是父容器根本“没高度可画”。
为什么 overflow: hidden 能让背景图显示出来
它会触发 BFC（块级格式化上下文），使父容器重新包含所有浮动子元素，从而正确计算自身高度。这个高度一旦撑开，background-image 就有渲染区域了。
- 必须作用于块级元素（如
div），若父容器是span或inline元素，得先加display: block - 如果父容器同时设置了
height或max-height，BFC 的自动撑高能力会被覆盖，背景仍可能被裁切 - 在 IE6/7 中需额外加
zoom: 1才能生效（现代项目基本不用管，但老系统里可能突然失效）
display: flow-root 是更干净的替代方案吗
是，而且它是专为解决这类问题设计的：创建一个无副作用的 BFC，不裁剪溢出内容、不干扰 border-radius 和 position: absolute 子元素的定位。
- 兼容性已足够好：
Chrome 64+、Firefox 62+、Safari 15.4+、Edge 79+都支持 - 不能和
position: absolute同时用在一个元素上——后者会让flow-root失效 - IE 完全不支持，若需兼容，得回退到
overflow: hidden或clearfix
为什么改用 display: flex 或 display: grid 后问题自动消失
因为规范明确要求：在 Flex 或 Grid 容器中，子元素的 float 声明会被忽略。此时子元素不再脱离文档流，父容器高度由布局引擎自动计算，背景图自然铺满。
- 这不是“清浮动”，是浮动本身失效了——所以不能依赖它实现图文环绕等场景
- 混用风险很高：比如在
display: flex的父容器里给子元素写float: left，虽然不报错，但可能意外导致高度再次塌陷 - 真正卡住人的，往往不是“怎么撑开高度”，而是撑开之后忘了检查父容器是否还有可靠的尺寸锚点——比如图片加载延迟、
font-display: swap导致文字重排、或 margin 折叠压缩了可用高度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
