overflow: hidden能修复背景图裁剪是因触发bfc使父容器包含浮动子元素，但会裁剪溢出内容如弹窗、阴影等；推荐用display: flow-root，它专为此设计，创建bfc且无裁剪副作用，但ie全版本不支持。
背景图被裁剪，不是图片本身的问题，是父容器高度塌陷导致的——浮动子元素脱离文档流，父容器 computed height 为 0px，背景图只能渲染在“看不见的高度”里。
为什么 overflow: hidden 能“修复”但不推荐单独用
它通过触发 BFC 让父容器重新包含浮动子元素，从而恢复高度，背景图自然显示完整。但它不是“清除浮动”，而是绕过问题。
- 副作用明显：
overflow: hidden会裁剪所有溢出内容，比如position: absolute的下拉菜单、tooltip、阴影或 transform 偏移的元素 - 在 Flex/Grid 容器中加
overflow: hidden无效——它们自身已是独立格式化上下文，该属性不触发额外 BFC -
overflow: auto在旧版 Safari 下可能误出滚动条，干扰布局
display: flow-root 是现代首选，但要注意兼容边界
它是专为解决此问题设计的显示类型，创建 BFC 且不改变盒模型行为，也不裁剪溢出内容。
- 必须加在父容器上：
.container { display: flow-root; } - 不兼容 IE 全版本；Safari
- 不能和
display: inline混用，否则退化为block - 如果子元素用了
float: right却没设宽度，仍可能因换行导致视觉异常——flow-root 只让父容器“看见”高度，并不改变浮动本身的布局逻辑
伪元素清除法（.clearfix）还在用，但细节极易出错
适用于需兼容 Safari 10.3 之前、IE11 等场景，但写法稍有偏差就失效。
- 核心三要素缺一不可：
content: ""、display: table（比block更稳）、clear: both - 错误写法：
clear: both直接加在父容器上——它只对“紧跟在浮动元素之后”的兄弟元素生效 - 父元素若为
inline或inline-block，伪元素可能不渲染，需先加display: block - 老项目若还依赖 zoom: 1（IE6/7），得额外补上，否则 hasLayout 不触发
真正容易被忽略的点：背景图问题常是“复合故障”
即使高度撑开了，背景图仍可能错位、重复或边缘被切——这不是清除浮动没做好，而是其他样式叠加影响。
-
background-attachment: fixed在浮动容器中滚动行为不稳定，建议改用scroll或移出浮动上下文 -
background-size: cover若父容器宽高未明确（如仅靠内容撑开），缩放基准不可控，可配合min-width/min-height锚定 - 部分旧版 Edge 对
background-origin: border-box和浮动共存支持差，显式设为padding-box更稳妥 - Flex/Grid 容器内子元素设
float会被忽略——这是规范行为，不是 bug；若业务真需图文环绕，应单独包一层非浮动容器再设背景图
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
