浮动图片底部对齐不一致是因vertical-align默认baseline导致，应设top或middle；浮动塌陷需用overflow:hidden或display:flow-root清除；float间margin失效多因父宽不足或换行；移动端应改用flex或grid替代float。
浮动图片底部对齐不一致
浮动元素默认按 baseline 对齐，图片和文字混排时容易出现底部参差不齐——尤其当图片后紧跟文字或行内元素时。这不是 margin 没生效，而是 vertical-align 的默认行为在作怪。
解决方法很简单：给图片加 vertical-align: top 或 vertical-align: middle，强制统一基线位置。
- 用
vertical-align: top适合图文上下结构，避免文字“吊”在图片下方 - 若需居中对齐，
vertical-align: middle更自然，但要注意它对齐的是父行高的中点，不是图片自身中点 - 别只调
margin，不设vertical-align的话，改再多 margin 也可能被 baseline 拉偏
float 后相邻块级元素塌陷导致错位
浮动会让父容器高度坍缩，如果后面跟着一个 div 或段落，它会“爬上”浮动图片右侧，甚至从顶部开始环绕——看起来像图片没对齐，其实是布局流被破坏了。
最稳妥的修复是清除浮动，而不是靠负 margin 硬拉：
立即学习“前端免费学习笔记（深入）”；
- 在浮动图片的父容器末尾加一个带
clear: both的空div（简单但语义差） - 更推荐给父容器设置
overflow: hidden或overflow: auto，触发 BFC 阻断浮动影响 - CSS 新写法可用
display: flow-root，语义清晰且无副作用，兼容性需查 CanIUse（Chrome 64+/Firefox 59+ 支持）
左右浮动图片之间 margin 不生效
当两个 float: left 图片并排，中间加 margin-right 却没间距？常见原因是外边距合并（margin collapse）不适用 float 元素，但真正卡住你的是：它们可能被包裹在不同行内上下文中，或者父容器宽度不够导致换行。
检查这三点：
- 确认父容器总宽 ≥ 所有浮动元素宽度 + margin 之和，否则第二张图会掉到下一行
- 浮动元素的
margin是有效的，但要避免用margin-left在第一个元素上“撑开”，应统一用margin-right控制间隔 - 若用百分比宽度，注意小数精度和四舍五入，建议用
calc()显式计算：比如width: calc(50% - 10px)配合margin-right: 20px
移动端 float 布局错乱且无法响应
float 本身不具备响应能力，一旦屏幕变窄，浮动图片不会自动堆叠，反而可能溢出或重叠。这不是对齐问题，是布局模型选错了。
现代场景下，优先考虑替代方案：
- 单图配文：用
display: flex+align-items: flex-start替代float，控制对齐更直接 - 多图网格：改用
display: grid，比如grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))，天然响应 - 必须兼容老浏览器？至少给浮动容器加
min-width和媒体查询，在小屏时强制取消float并设width: 100%
float 的对齐问题，往往不是调不准，而是它本就不该出现在需要精确、响应、可维护的布局里。真要修，先看是不是该换模型了。
