父容器背景图不显示是因浮动致高度塌陷为0px；首选display: flow-root触发无副作用BFC，现代浏览器支持但IE不兼容，需降级用overflow:hidden或clearfix。
父容器背景图不显示，不是图片路径错了，是它高度塌陷到 0px 了——浮动子元素脱离文档流，父容器根本“算不出高度”，background-image 只能在不可见区域里缩放或裁剪。
display: flow-root 是最干净的解法
它专为解决这个问题设计：创建一个无副作用的 BFC，让父容器重新包含浮动子元素的高度，同时不裁剪 overflow、不干扰 position: absolute 子元素、不破坏 border-radius 渲染。
-
display: flow-root必须加在父容器上，比如.container { display: flow-root; } - 现代浏览器都支持：Chrome 64+、Firefox 62+、Safari 15.4+、Edge 79+
- IE 全版本不支持；若需兼容，得降级用
overflow: hidden或伪元素 clearfix - 别和
position: absolute同时写在一个元素上——后者会让flow-root失效 - 如果父容器原本是
inline或inline-block，先加display: block，否则flow-root不生效
overflow: hidden 能用但副作用明显
它靠触发 BFC 强制父容器撑高，见效快，但本质是“掩盖问题”而非“修复布局”。
-
overflow: hidden会裁掉所有溢出内容：下拉菜单、tooltip、box-shadow、transform 偏移元素都可能被切掉 - 配合
border-radius时，在旧版 Safari/Edge 中圆角裁剪行为不稳定 - iOS Safari 12–14 下，
overflow: auto可能误出横向滚动条，优先选hidden - 如果父容器已设
height或max-height，BFC 的自动撑高能力会被覆盖，背景仍可能被裁切
::after 伪元素 clearfix 还得会写对
适用于需兼容 Safari 10.3 之前、IE11 等老环境，但三要素缺一不可，错一个就失效。
- 必须写全：
content: ""+display: table（比block更稳）+clear: both - 错误写法：
clear: both直接加在父容器上——它只对兄弟元素生效，对自身无效 - 错误写法：伪元素用
display: block且父容器是inline——伪元素不渲染，清除失败 - 老项目要兼容 IE6/7，得额外补
zoom: 1触发 hasLayout
撑开之后背景图还是错位？检查锚点是否可靠
真正卡住人的，往往不是“怎么撑高”，而是撑开之后忘了确认父容器是否有稳定尺寸依据。
- 图片加载延迟、
font-display: swap导致文字重排，都可能让撑开后的高度再次波动 -
margin折叠会压缩可用高度，尤其在父子间没 border/padding 隔开时 - 如果用了
background-size: cover却显示异常，先查background-origin和background-attachment是否被意外覆盖 - 临时加
border: 1px solid red到父容器，一眼确认它是否真被撑开了
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
