浮动元素 background-image 显示不全，主因是父容器高度塌陷；需清除浮动（推荐 overflow: hidden）并设置父容器宽高锚点，否则仅清浮动仍无法正常渲染背景图。
浮动元素的 background-image 为什么只显示一半
因为浮动元素脱离文档流，父容器高度塌陷，background-image 只能渲染在“可视高度”上——而这个高度常常是 0 或仅含内联内容的高度。
用 overflow: hidden 清除浮动最稳妥
这是兼容性最好、副作用最小的清除方式，不会影响定位或 flex 布局，且对 IE8+ 都有效。
- 不要用
clear: both单独加在空标签上（如<div style="clear:both"></div>），冗余且语义差 -
overflow: auto在某些旧版 Safari 下可能触发意外滚动条，hidden更干净 - 如果父容器本身需要溢出可见（比如下拉菜单），改用
display: flow-root（现代浏览器）
display: flow-root 是现代解法但要注意兼容性
它创建一个块级格式化上下文（BFC），天然包裹浮动子元素，且不改变盒模型行为，比 overflow 更语义化。
- Chrome 64+、Firefox 58+、Safari 15.4+ 支持；IE 完全不支持
- 不能和
position: absolute同时用于同一元素（会失效） - 如果项目需兼容 iOS 15.3 或更早，别单独依赖它
背景图显示不全，光清浮动还不够
清除浮动只是让父容器“有高度”，但 background-image 还要靠宽高撑开渲染区域。常见漏掉的点：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
height或min-height，仅靠内容撑开仍可能不足（尤其图片加载延迟时） -
background-size: cover在高度塌缩时会裁剪严重，可临时换contain排查 - 浮动子元素用了
margin-bottom，但父容器没padding-bottom，视觉上像“背景被切掉”
