float 会导致父容器高度塌陷和图片错行，因元素脱离文档流；需设明确宽度、避免干扰属性并清除浮动；现代项目应优先使用 flex 或 grid 布局。
float 左右浮动图片后为什么总“掉下去”？
因为 float 会让元素脱离文档流，父容器高度塌陷，后续内容会顶上来，看起来像图片“没对齐”或“重叠”。这不是对齐失败，而是容器失去包裹能力。必须清除浮动或触发 BFC 才能恢复布局预期。
- 常见现象：
float: left的图片和float: right的图片不在同一行、上下错位、文字从中间穿过 - 根本原因：两个浮动元素虽方向相反，但若父容器没有足够宽度容纳二者并排，后者会自动换行到下一行
- 必须确保父容器宽度 ≥ 左图宽 + 右图宽 + 间距，否则必然错行
如何让左右浮动图片真正在同一水平线对齐？
关键不是只设 float: left 和 float: right，而是控制它们的共存条件：
- 给两张图片都设置明确的
width（如width: 45%），留出间隙 - 父容器不能有
overflow: hidden或display: flex等干扰 float 的属性（否则 float 失效） - 避免图片外层有
margin-top或vertical-align类样式干扰基线对齐 - 推荐加
box-sizing: border-box防止 padding/border 溢出宽度计算
.img-container {
width: 100%;
}
.left-img {
float: left;
width: 45%;
box-sizing: border-box;
}
.right-img {
float: right;
width: 45%;
box-sizing: border-box;
}
清除浮动后，图片还对齐吗？
清除浮动（如用 ::after 伪元素）只解决父容器塌陷，不影响已浮动元素的位置关系。但要注意清除点位置：
- 如果在两张图片之后加
clear: both，对齐不受影响 - 如果在左图后就加
clear: left，右图会被挤到下一行——这是最常踩的坑 - 更安全的做法是：浮动图片 → 不干预 → 在父容器末尾统一清除
.img-container::after {
content: "";
display: table;
clear: both;
}
float 还值得在新项目中用吗？
不推荐。现代布局中 float 仅适合纯文本环绕图片这类经典场景。左右并排图片，display: flex 或 display: grid 更可控、响应式更自然：
立即学习“前端免费学习笔记（深入）”；
-
flex可直接用justify-content: space-between实现左右撑开，无需担心塌陷 -
grid写成grid-template-columns: 1fr auto 1fr，把右图放第三格，左图放第一格，中间自动留白 - 所有主流浏览器对
flex/grid支持早已完善，IE11 是唯一例外
如果你必须兼容 IE9–10，float 是无奈之选；否则，别为左右对齐图片再碰 float —— 它的脆弱性远超你调试时愿意付出的时间。
