图片浮动时下方出现间隙的本质是其作为行内元素默认对齐基线。解决方法有三：一是设 display: block; 使其变为块级元素；二是用 vertical-align: top/middle/bottom 调整对齐方式；三是检查并调整父容器 line-height 或 font-size。
图片在浮动时下方出现间隙，本质是图片作为行内元素，默认对齐基线（baseline），与文字底部留有空间。解决方法很简单，两个最常用且有效的方案：
设置图片为块级元素
让图片脱离行内布局流，自然消除基线对齐带来的间隙：
- 给图片加 display: block;，这是最直接、兼容性最好的方式
- 适用于大多数浮动图片场景，尤其当图片不需要与文字混排时
- 代码示例：
img { display: block; float: left; }
调整垂直对齐方式
如果图片需保持行内特性（比如图文混排），可改用 vertical-align 控制对齐基准：
- 常用值：
vertical-align: top;、middle;或bottom; -
bottom能对齐到父容器底线，通常比默认 baseline 更贴近预期 - 注意：该属性只对行内元素和表格单元格生效，需确保图片没被设成 block
顺带检查父容器 line-height
有时间隙看似来自图片，实则是父容器设置了较大的 line-height，撑高了行框高度：
立即学习“前端免费学习笔记（深入）”；
- 给图片父元素设
line-height: 0;或font-size: 0;可快速验证是否为此原因 - 若确认是此问题，建议优先调低 line-height，而非强行 hack 图片
基本上就这些。display: block 最省心，vertical-align 更灵活——按需选一个就行。
