vertical-align仅对inline/inline-block元素生效，float元素脱离文档流后变为块级框，vertical-align对其无效；浮动导致父容器高度塌陷，叠加line-height与基线对齐产生底部空隙，真正解法是改用display:block、inline-block+vertical-align或flex布局。
vertical-align 不是万能解，它只对行内级元素（inline、inline-block）生效；而 float 元素一旦脱离文档流，就变成块级框，vertical-align 对它完全无效——所以“加了 vertical-align: bottom 还有 5px 空隙”，根本不是没调对，而是调错了对象。
为什么浮动后父容器底部多出 3–5px
这不是浮动本身“加了空隙”，而是浏览器在渲染行内格式化上下文（IFC）时，对未清除浮动的父容器高度计算失准，叠加默认行高与基线对齐产生的视觉错觉：
- 浮动元素脱离标准流 → 父容器无法被撑开高度 → 实际高度可能仅由最后一行文字的
line-height和 descender（如字母 g、y 的下延部分）决定 - 父容器若无明确
height或min-height，其高度会按内容“最小包裹” → 文字行高 + 字体 descender 留下的空白，常被误认为是“图片/浮动项下方多出的 5px” - 源码中
<img>后的换行符或空格，会生成一个“匿名行内盒子”，它参与基线对齐，进一步拉低底部视觉锚点
为什么给 img 加 vertical-align: bottom 没用
因为该 <img> 如果被设了 float: left，它就不再是行内级元素，vertical-align 属性会被浏览器忽略（DevTools 中 computed 值显示为 auto）：
- 验证方法：在 DevTools 中选中该
<img>，查看vertical-align的 computed 值 —— 若是float元素，必为auto，无论你写了什么 - 想让
vertical-align生效，必须先移除float，改用display: inline-block或保持默认inline - 即使生效，
vertical-align: bottom是对齐到行框（line box）的底边，不是父容器底边；若父容器无足够高度，仍可能露出空白
真正有效的 3 种修复方式
别纠结 vertical-align 能不能救 float，直接切换控制维度：
-
最轻量解：把
<img>设为display: block→ 它不再参与行内布局，自然不产生基线间隙，父容器也能按块级逻辑正确计算高度 -
兼容性解：放弃
float，用display: inline-block+vertical-align: bottom→ 同时给父容器设font-size: 0消除换行空白，子元素再单独恢复字体大小 -
现代解（推荐）：父容器设
display: flex+align-items: flex-end→ 所有子项（无论高度是否一致）严格按容器底边对齐，且无需清除、无间隙、响应式友好
复杂点在于：很多人以为问题出在图片，其实根因是浮动破坏了父容器的高度上下文；而试图用 vertical-align 去修一个已脱离行内流的元素，就像往漏桶里加水——方向就错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
