浮动图片下方间隙过大是父容器塌陷与行内基线空隙双重叠加所致；display: flow-root 清除塌陷，vertical-align: top 消除基线空隙，兼顾图文环绕。
浮动图片下方间隙过大，不是 margin 没设对，而是父容器塌陷 + 行内基线空隙双重叠加的结果；display: flow-root 配合 vertical-align: top 是现代项目最稳解法。
为什么浮动图片下方会“空一大截”
这空隙通常不是单个像素级的 baseline 缝，而是两层问题叠在一起：
- 父容器未清除浮动，高度塌陷，后续内容从浮动元素顶部开始流，视觉上像“被顶高了一大段”
- 图片本身是
inline元素，即使浮动了，初始渲染仍按 baseline 对齐，在行框底部预留 descender 空间（约 3–4px），在大line-height下会被放大 - 若父容器是
<p></p>或<figure></figure>，自带margin-bottom，也会被误认为是“浮动导致的空隙”
用 display: flow-root 清除塌陷，而不是 overflow: hidden
display: flow-root 是专门为此设计的 BFC 触发方式，比 overflow: hidden 更干净：
- 它强制父容器生成新的块级格式化上下文，能“感知”浮动子元素高度，自然撑开容器
- 不会意外裁剪
box-shadow、position: absolute子元素或下拉菜单 - 兼容 Chrome 58+ / Firefox 53+ / Safari 10.1+，2026 年已无兼容顾虑
- 写法简单：
.img-container { display: flow-root; }，无需伪元素或额外 HTML
给图片加 vertical-align: top，别碰 display: block
在浮动布局中，display: block 虽能消灭 baseline 空隙，但会让图片彻底退出行内流，破坏图文环绕能力——而你用 float 的本意就是环绕。
-
float: left的图片仍参与行内格式化上下文（IFC）的初始构建，vertical-align依然生效 -
vertical-align: top将图片顶部对齐行框顶部，直接消除底部 descender 空间，且不影响文字环绕 - 务必移除
vertical-align: bottom—— 它对浮动元素无效，开发者工具里会标为“unused” - 若父容器有继承的
line-height: 2，记得重置：.img-container { line-height: 1; }（仅当内部无文字时）
真正该查的三处地方，常被跳过
加完 flow-root 和 vertical-align 还有缝？真因往往藏在别处：
-
<p></p>标签自带margin-bottom: 1em，检查图片父容器是否是语义化标签 - 图片后紧跟 HTML 换行符或空格，在 inline 场景下会渲染为约 4px 空白符（虽然浮动后影响变小，但旧版 Safari 仍可能体现）
- 图片导出带透明底或未裁切（Figma 默认导出 PNG 常见），CSS 无法干预，必须回源文件修图
打开开发者工具，直接看 computed 样式里的 height、margin-bottom、line-height，比反复试 vertical-align 更快定位真因。浮动图片的间隙问题，从来不是单一 CSS 属性能解决的，而是文档流理解、布局意图和渲染细节的综合结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
