父元素高度塌陷导致背景图截断，根源是浮动子元素脱离文档流使父容器无法自动计算高度；推荐用display: flow-root清除浮动，其次overflow: hidden或伪元素::after，避免硬设height/min-height。
父元素高度塌陷导致背景图截断
浮动元素会脱离文档流，父容器无法自动计算高度，表现为背景图只显示到父元素“视觉上”的高度（通常是 0），实际内容被截断。这不是背景图本身的问题，而是父容器没撑开。
清除浮动的几种可靠方式
关键不是“清浮动”这个动作，而是让父容器重新获得对子元素高度的感知能力。以下方法按推荐顺序排列：
- 给父元素设置
display: flow-root—— 最简洁现代方案，兼容 Chrome 64+、Firefox 62+、Safari 15.4+，无副作用 - 给父元素设置
overflow: hidden或overflow: auto—— 兼容性极好，但需注意内容溢出时会被裁剪或出现滚动条 - 在父元素末尾插入伪元素清除：
parent::after { content: ""; display: table; clear: both; }—— 兼容所有支持伪元素的浏览器，但代码稍冗长
为什么 float: left 子元素不触发 BFC 就会塌陷
浮动子元素不会参与父容器的高度计算，除非父容器自身形成了新的块级格式化上下文（BFC）。display: flow-root、overflow: hidden、float: left 等都会触发 BFC，但只有 flow-root 是专为此场景设计的——它既创建 BFC，又保持正常文档流行为，不改变布局语义。
避免踩坑：不要用 height 或 min-height 硬撑
手动设 height 会让布局失去响应性；min-height 在子元素高度变化时依然可能不足。更隐蔽的问题是：如果子元素用了 margin-bottom，而父元素仅靠 overflow: hidden 清除，某些旧版 Safari 下仍可能漏掉底部间距，导致背景图边缘看起来被“切掉一像素”。此时优先选 display: flow-root，它能正确包含 margin 边界。
立即学习“前端免费学习笔记（深入）”；
真正需要关注的是父容器是否形成了 BFC，以及所选方案在目标浏览器中的渲染一致性。其他技巧比如给父元素加边框或 padding 来“骗”高度，只是掩盖问题，不是解决根源。
