应避免用 float 布局多图排列或分栏，优先使用 flex 或 grid；float 仅适用于图文环绕等原始场景。
图片浮动后父容器高度塌陷
这是最常见问题：给 根本原因是浮动元素脱离文档流，父容器无法感知子元素高度。不能只靠 当一行放不下所有浮动图片时，它们本该自动换行，但常因容器宽度计算误差、图片实际尺寸波动（如未设 立即学习“前端免费学习笔记（深入）”； 除了兼容 IE8–9 的遗留项目， 真正需要图文混排时， 老项目迁移时，别试图修 float: left 或 float: right，但其父元素（比如 margin 补救——它不解决塌陷本身。
overflow: hidden 或 overflow: auto 给父容器（触发 BFC）::after 清除浮动：.wrap::after {
content: "";
display: table;
clear: both;
}display: flex 或 display: grid 替代 float 布局float + margin 导致图片重叠或间隙异常
margin 值没设对时，浮动图片之间容易挤在一起，或因外边距折叠/计算偏差出现意外空隙。尤其在响应式场景下，margin 固定像素值会破坏流体排布。
margin-left 和 float: left —— 左侧可能溢出容器margin-right（对左浮元素）或 margin-left（对右浮元素），并确保总宽度 + margin ≤ 容器宽度margin: auto：浮动元素上无效，不会居中vertical-align（仅对 inline/inline-block 生效，对 float 无影响）多张图片浮动换行错乱
max-width: 100%）、或父容器有 white-space: nowrap 等干扰样式而卡住或错位。
img { max-width: 100%; height: auto; }width（如 width: 30%），别依赖图片原始尺寸font-size: 0 后忘记重置子元素字体——这会影响行内换行行为display: flex; flex-wrap: wrap 更稳float 在现代 CSS 中还该用吗
float 不再是布局首选。它本意是文字环绕图片，不是为栅格或卡片布局设计的。强行用 float 配合 margin 控制位置，很快会遇到清除困难、响应断点失效、垂直对齐不可控等问题。float 仍可安全使用；但只要涉及“多图横向排列”“左右分栏”“自适应网格”，就该切换到：
display: flex（主轴对齐、换行、间距用 gap）display: grid（定义行列、区域、响应式模板）inline-block + vertical-align（轻量级替代，注意空白符问题）float 的 margin 组合，直接重构布局层——省下的调试时间远超学习成本。
