浮动图文间距问题根源在于行框高度计算异常，应通过vertical-align: top、明确line-height和BFC触发来修复，而非滥用margin/padding；现代布局推荐Grid/Flexbox替代float。

浮动元素导致文字环绕时行高错乱

浮动图片后，紧随其后的文字出现上下间距不一致，常见于段落首行被图片“顶起”或末行“塌陷”。这不是文字本身的问题，而是 float 脱离文档流后，行框（line box）高度计算异常所致——尤其当图片高度与行高不匹配、或字体渲染存在 subpixel 差异时更明显。

解决核心不是盲目加大 margin 或 padding，而是先稳定行框基线。推荐做法：

• 给图片设置 vertical-align: top（默认是 baseline，会预留下降部空间）
• 确保父容器有明确的 line-height（如 line-height: 1.6），避免浏览器用默认值抖动
• 若图片带边框/圆角，额外加上 box-sizing: border-box 防止 padding 影响尺寸判断

margin-left/right 对浮动图片无效？

对已设置 float: left 的图片直接加 margin-left，常发现没反应——因为浮动元素的外边距仍生效，但视觉上被文字流“挤占”了空间。真正要调的是图片和文字之间的“呼吸感”。

更可控的方式是作用于文字容器：

立即学习“前端免费学习笔记（深入）”；

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 给包裹文字的 <p></p> 或 <div> 加 <code>margin-left（配合 overflow: hidden 触发 BFC，防止文字绕到图片下方）
• 或用 margin 控制图片自身与周围块级元素的距离，比如 margin: 0 16px 12px 0（上右下左），其中右距决定文字起始位置
• 避免只设 margin-right：若图片在右侧浮动，应改用 margin-left

padding 用在谁身上才真正影响图文间距？

padding 不改变浮动元素的定位，但会撑开它的内容盒。误加在图片上，可能让图片变大、挤压文字；加在文字容器上，则会在文字内部留白，和“间距”目标不符。

真正该用 padding 的地方是：

• 图片的父容器（如 <figure></figure>），用 padding 统一控制图文整体边距
• 文字段落的 padding-left（当图片左浮动时），等效于“缩进”，比靠 margin 更稳定
• 慎用 padding 在图片自身：除非你明确需要内边距+背景色/边框的组合效果

现代替代方案：为什么 float 正在被弃用

用 float 做图文混排，本质是在 hack 布局机制。CSS Grid 和 Flexbox 出现后，float 已不推荐用于布局目的。实际项目中更健壮的做法是：

• 用 display: grid + grid-template-columns 显式划分图文区域
• 或用 shape-outside 配合 float 实现文字绕图，但需注意 Safari 对 shape-outside: circle() 等支持不稳定
• 最简单升级：把图片换成 inline-block + vertical-align，配合 line-height 控制对齐，完全规避浮动副作用

老项目维护时，优先修 vertical-align 和 line-height；新需求直接跳过 float —— 它带来的间距问题，往往是系统性布局思路滞后的信号。