浮动导致父容器高度塌陷使背景图不可见，应优先用display: flow-root或现代布局（Flex/Grid）替代浮动，避免clearfix兼容性问题及额外样式补丁。
浮动元素导致父容器高度塌陷，背景图看不见
父元素设了 background-image，但里面全是 float: left 的子元素，结果背景图只显示一条细线甚至完全不出现——不是图片路径错了，是父容器实际高度为 0，根本没空间渲染背景。
- 这是 CSS 浮动的固有行为：浮动元素脱离文档流，父容器无法感知其高度
- 常见于导航栏、图文混排卡片、多列布局等场景
- 不要用
height或min-height硬撑，会破坏响应性 - 现代写法优先用
display: flow-root（兼容 Chrome 64+/Firefox 58+/Safari 15.4+）
clearfix 方案仍需谨慎使用
老项目还在用 ::after 伪元素清除浮动，但容易漏掉关键细节。
- 必须给父容器设置
zoom: 1（IE6/7）或content: ""+display: table（旧版 Safari） - 如果父元素本身是
inline或inline-block，::after可能不生效，得先改display - 避免在 Flex 或 Grid 容器里套用 clearfix——它和新布局模型冲突，反而引发意外交互
- 示例最小可靠写法：
.clearfix::after { content: ""; display: table; clear: both; }
background-image 在 float 容器里显示异常的其他原因
即使高度恢复了，背景图仍可能错位、重复或裁剪异常。
-
background-attachment: fixed在含浮动的容器中常失效，滚动时背景不动或跳变，改用scroll或移出浮动上下文 -
background-size: cover配合浮动子元素时，若父容器宽高未明确，缩放基准不可控，建议加min-width/min-height - 部分浏览器（如旧版 Edge）对
background-origin: border-box和浮动共存支持差，可显式设为padding-box
真正一劳永逸的替代思路
别跟浮动死磕。只要不是要兼容 IE8 及更早版本，就该换布局方式。
- 单行多列：用
display: flex，子项自动撑高父容器，无需清浮 - 多行网格：直接上
display: grid，grid-template-columns控制列数，背景图自然铺满 - 图文环绕：用
shape-outside+float是特例，但此时父容器通常不需要背景图；若需要，单独包一层非浮动容器 - 注意：Flex/Grid 容器内子元素即使设
float，也会被忽略——这是规范行为，不是 bug
浮动不是布局工具，是文本环绕工具。把它当布局用，后面每个背景图、边框、阴影都得补坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
