根本原因是行框高度受图片基线、line-height及浮动脱离文档流共同干扰；应设vertical-align: top、明确line-height、触发bfc，而非依赖margin调整。
浮动图片与文字间距不均，根本不是 margin 没加够，而是行框（line box）高度被图片基线、line-height 和浮动脱离流三者共同干扰。直接调 margin 只能缓解表象，不治本。
为什么 margin-right 加了但首行和末行间距看起来不一样？
文字环绕时，每行的行框高度由该行内最高元素决定。如果图片高度不等于行高，或图片默认 vertical-align: baseline 留出下降部空间，就会导致首行“被顶高”、末行“悬空下沉”。此时 margin-right 虽控制水平距离，却无法统一垂直节奏。
- 给
img加vertical-align: top（前提是没设display: block） - 确保父容器有明确
line-height，比如line-height: 1.6，避免浏览器用默认值抖动 - 若图片带
border或border-radius，加上box-sizing: border-box防止尺寸误判
给 img 加 margin 为什么有时完全没反应？
常见错因是方向写反，或忽略了 display 类型。左浮动时只有 margin-right 推开右侧文字；右浮动只认 margin-left。而 img 默认是 inline 元素，部分浏览器下 margin-top/bottom 不生效，margin-left/right 也可能被行框挤压失效。
- 务必显式写
margin-right: 16px（左浮）或margin-left: 16px（右浮），禁用margin: 12px这类简写 -
img必须加display: block，否则 margin 行为不可控 - 不要给
p或文字容器加margin-left试图“推文字”——它不改变环绕逻辑，只可能造成错位
第二段文字突然掉到图片下方，调 margin-bottom 有用吗？
没用。这是父容器塌陷导致的布局断裂，和图片自身的 margin 无关。第二段文字从图片底部开始，说明父容器压根没“感知”到浮动元素的高度，后续内容只能按坍缩后的 0 高度重新排布。
- 最干净解法：给图片的**直接父容器**加
display: flow-root - 兼容旧浏览器可退用伪元素 clearfix：
.parent::after { content: ""; display: table; clear: both; } - 慎用
overflow: hidden——它虽能触发 BFC，但会裁剪position: absolute子元素或阴影溢出
真正容易被忽略的是：浮动图文混排本质是借用渲染引擎的绕排机制，而非布局工具。一旦出现间距不均，优先检查 vertical-align、line-height 和 BFC 触发这三点，而不是继续堆 margin 值。现代项目中，shape-outside 或 display: grid 才是更可控的替代路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
