vertical-align: middle 在浮动图片上不生效，因为浮动元素脱离行内格式化上下文（IFC），vertical-align 仅对 inline/inline-block 元素有效；空隙主因是父容器未闭合、line-height 过大或 margin 外边距，修复应优先用 display: block 或创建 BFC。
vertical-align: middle 在浮动容器中对图片底部空隙基本无效——因为一旦元素设置了 float，它就脱离了行内格式化上下文（IFC），而 vertical-align 只对 inline 或 inline-block 元素生效。
为什么 vertical-align: middle 在浮动图片上不生效
浮动（float: left 或 float: right）会让元素脱离常规的行内流，浏览器不再为其计算基线、中线或行框边界。此时设置 vertical-align 不会触发任何对齐行为，DevTools 中该属性甚至可能显示为“not applicable”。你看到的空隙，根源不是对齐问题，而是父容器未闭合 + 行框残留空间共同导致的视觉塌陷。
浮动容器里图片底部空隙的真实成因
- 父容器未形成 BFC，无法包裹浮动子元素，高度塌陷，后续内容“掉下来”造成空白假象
- 即使只有一张浮动图片，其父容器若继承了较大的
line-height（比如来自p或全局样式），行框仍会预留 descender 空间，撑高容器底部 -
img标签后存在换行或空格，在 inline 模式下会渲染为约 4px 的空白符；但一旦浮动，这个间隙通常消失——所以它往往不是主因 - 图片自身导出带透明底或未裁切（如 Figma 导出 PNG 保留画布边距），CSS 无法修正
真正有效的解法：绕过 vertical-align，直击布局本质
浮动场景下，别在 vertical-align 上浪费时间。优先检查并执行以下操作：
- 给浮动图片加
display: block：它既消除基线空隙，又与float共存无冲突，是最小侵入的修复方式 ——img { float: left; display: block; } - 给父容器创建 BFC：用
display: flow-root（推荐）、overflow: hidden（注意裁剪风险）或伪元素清除浮动（::after { content: ""; display: table; clear: both; }） - 若父容器是
p、section等自带margin-bottom的元素，先重置它的margin，否则你以为的“图片空隙”其实是段落外边距 - 确认是否真需要浮动：现代项目中，
display: flex或display: grid能天然避免所有这类问题，且代码更可控
真正容易被忽略的是：浮动本身已让 vertical-align 失效，但开发者常因习惯性加它而误以为“加了没用”，继而反复调试——其实第一步该做的，是打开 DevTools 查看父容器 computed height 是否为 0，以及 line-height 是否异常偏大。
立即学习“前端免费学习笔记（深入）”；
