letter-spacing对浮动环绕无效，因其仅调整字符间间隙，而文字与浮动图片间距取决于行框被挤开的距离；应通过浮动元素的margin或flex gap控制贴边距离。
直接给文字容器设 letter-spacing 不能解决浮动图片旁的文字间距问题——它调的是字符间空隙，不是文字与图片之间的距离。真正要控制的，是文字流绕过浮动元素时的“贴边距离”。
为什么letter-spacing对浮动环绕无效
letter-spacing作用于每个字符的左右间隙，无论文字是否环绕浮动元素，它都均匀施加；而浮动导致的文字偏移，是行框（line box）整体被图片挤开的结果，和单个字间距无关。你调大 letter-spacing，只会让文字本身变松散，但首行仍紧贴图片右边缘，甚至可能因字宽增加加剧换行错位。
- 常见误用：给
<p>加letter-spacing: 2px后发现标题下第一行文字还是“蹭着图走”，以为属性没生效 - 中文字体尤其明显：汉字无天然词间空格，
word-spacing基本不触发，letter-spacing又只影响字内间隙 - 若图片带
margin，比如margin-right: 12px，那才是控制文字与图之间距离的正解
安全设置文字与浮动图片间距的三种方式
核心原则：间距必须施加在浮动元素自身，或其父容器上，而非文字容器。
- 给浮动图片加
margin-right（向右浮动）或margin-left（向左浮动）：这是最直接、兼容性最好、且语义清晰的做法。例如：img.float-right { float: right; margin-left: 16px; } - 用
gap配合display: flex替代浮动：把图片和文字包装进同一个flex容器，用gap控制两者间距。注意——此时图片不能再设float，否则会失效 - 避免用
padding挤文字：有人尝试给文字容器加padding-left来“躲开”右浮动图，结果整段文字都缩进，破坏段落对齐；同理，text-indent只影响首行，不解决多行环绕
容易踩坑的嵌套与响应式场景
当浮动图片在响应式布局中缩放或换行时，固定像素的 margin 可能失衡：
立即学习“前端免费学习笔记（深入）”；
- 小屏下图片宽度变小，但
margin-right: 16px仍保持，导致文字空出过大空白 - 如果图片是
max-width: 100%，建议用相对单位：margin-left: 1em或margin-left: 2vw，让间距随字号或视口变化 - 嵌套浮动时（比如图文卡片里再套浮动图），外层容器若没触发 BFC，内部
margin可能被折叠或忽略——此时优先用display: flow-root包裹卡片 - 绝对定位图片不参与文档流，
float失效，margin也不起绕排作用；这类情况需改用shape-outside或 CSS Grid 显式布局
真正难控的不是数值本身，而是浮动与文字流之间那种隐式的、依赖行高和字体渲染的耦合关系——哪怕设了 margin，不同浏览器对小字号+紧排中文的行框计算仍有微差，所以务必在 Safari、Chrome 和 Firefox 下实机验证首行贴边效果。
