应使用 display: flow-root 清除浮动，它创建BFC且无副作用；若需兼容旧浏览器，则用 clearfix 伪元素三要素（content: ""; display: table; clear: both）并确保父容器为 block。
背景图片被截断，不是图片本身被裁了，而是父容器高度为 0 —— 清除浮动没真正生效，容器根本没“包住”子元素。
为什么 clear: both 加在父容器上没用
它只对「紧跟在浮动元素之后的兄弟块级元素」起作用，不是给父容器加个样式就能让父容器自动包含子项。直接写 .container { clear: both; } 完全无效，computed height 还是 0px。
常见错误写法包括：
- 父容器设了
display: inline-block或display: inline，导致::after伪元素不渲染 - 漏掉
content: ""，伪元素不会生成，clear: both失去作用对象 - 用了
display: block而非display: table，在 Safari 10.2 及更早版本中清除失败 - 父容器本身有
zoom: 1需求（如兼容 IE6/7），但没补上，hasLayout 未触发
推荐的清除方式：优先用 display: flow-root
这是专为解决此问题设计的 display 值，创建 BFC 且无副作用 —— 不裁剪 position: absolute 元素、不误触发滚动条、不干扰 border-radius 渲染。
立即学习“前端免费学习笔记（深入）”；
只需一行：
.container {
display: flow-root;
background-image: url(bg.jpg);
}
注意兼容性边界：
- IE 全版本不支持（2026 年仍需兼容时必须绕过）
- Safari 10.3–15.3 不支持；iOS Safari 10.3 之前也无效
- 不能和
display: inline混用，否则退化为block
老项目 fallback：伪元素 ::after 必须三要素齐全
最稳妥的兼容写法（覆盖 IE8+、Safari 9+、Android 4.4+）：
.clearfix::after {
content: "";
display: table;
clear: both;
}
使用时确保：
- 父容器已设
display: block（若原为inline或inline-block，需显式覆盖） - HTML 中正确添加 class：
<div class="clearfix">...</div> - 不要在 Flex/Grid 容器里套这个类 —— 它们自身已是独立格式化上下文，加了反而可能干扰对齐
容易被忽略的复合影响点
即使高度撑开了，背景图仍可能错位或边缘被切，原因常不在清除浮动本身：
-
background-attachment: fixed在浮动容器中滚动行为不稳定，建议改用scroll或移出浮动上下文 -
background-size: cover缺少明确宽高基准时缩放不可控，可配合min-width/min-height锚定 -
background-origin默认是padding-box，若父容器有 padding 但高度塌陷，背景会“悬空”在 padding 区域里，可试background-origin: content-box -
overflow: hidden看似能闭合浮动，但它会裁剪所有溢出内容 —— 包括box-shadow、transform偏移元素、圆角下的绝对定位弹层
真正卡住人的，往往不是“没清浮动”，而是清了但没检查 computed height 是否真变了，或者清完又叠加了其他干扰背景绘制的样式。打开开发者工具，盯着那个 height 值看，比猜更可靠。
