浮动图片下方大空白根因是父容器塌陷或clear未清除，需用display: flow-root等方案闭合文档流，并通过vertical-align: top消除行内间隙，而非仅调margin。
浮动图片下方出现大空白，通常是 clear 或父容器塌陷导致
浮动元素会脱离文档流，如果父容器没有清除浮动或设置高度，它会“看不见”子元素，导致后续内容从浮动元素顶部开始排布，视觉上像下方空了一大截。这不是 margin 太大，而是布局逻辑没闭合。
- 检查父容器是否缺少
overflow: hidden、display: flow-root或伪元素::after { content: ""; clear: both; display: table; } - 避免只靠调小
margin-bottom治标——改了图片间距，但父容器仍塌陷，换张图或加文字可能又出问题 -
display: flow-root是最干净的现代解法（兼容 Chrome 58+/Firefox 53+/Safari 10.1+），比overflow: hidden更安全（不意外裁剪溢出内容）
图片本身有默认 vertical-align 值，引发行内间隙
浮动元素默认按 baseline 对齐，而图片是行内替换元素，底部会留出约 4px 空隙（为字母 descender 预留）。这个间隙常被误认为是 margin，实则与 line-height 和对齐方式强相关。
- 给图片加
vertical-align: top、middle或bottom（推荐top，最可控） - 或者设父容器
font-size: 0，再在图片上重置字体大小（适合纯图容器） - 不用
display: block—— 虽然能去间隙，但会丢失行内对齐能力，且与浮动语义冲突
用 margin 微调前，先确认单位和继承关系
直接写 margin: 10px 容易受父级 font-size 或缩放影响；若图片在 figure 或 div 中，外层容器的 padding 或 border 也可能被当成“间隙”。
- 用浏览器开发者工具选中图片，看 computed 样式里
margin、padding、border是否真被设了值 - 优先用
rem或px，慎用%（百分比基于父容器宽度，垂直方向无效） - 如果多个浮动图并排，
margin-right叠加可能导致右侧溢出，改用gap+display: flex更稳（但需放弃浮动）
真正该放弃浮动的时候：现代布局更简单
浮动本就不是为图文混排设计的，而是早期模拟多栏的 hack。现在 display: flex、display: grid 或 float: none + shape-outside 都能更好控制图片环绕和间隙。
立即学习“前端免费学习笔记（深入）”；
- 单图环绕文字：用
float: left+shape-outside: circle()（配合clip-path控制轮廓） - 多图网格：直接
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) - 只要不支持 IE11，就别硬撑浮动——
flow-root+vertical-align是底线，再往上该换布局模型了
margin 是最快止痛，但清浮动、对齐方式、容器上下文这三处不动，迟早会在其他设备或内容变化时复现。 
