加 margin-right 到 img 元素可解决文字紧贴浮动图片问题，因文字环绕的是 img 的外边距边界，默认 margin: 0 导致无留白；需设 display: block 并避免简写上下 margin，推荐 0.8em–1.2em 或 12px–20px。
文字紧贴浮动图片左边缘，不是 float 没生效，而是没给 img 加对 margin —— 浏览器按规范让文字行框紧贴浮动元素的「外边距边界」，这个边界默认就是图片的右边框位置。
为什么加了 float: left 文字还顶到图片边上？
因为浮动只改变文字的“绕排路径”，不自动加留白。文字环绕的是 img 的 margin edge（外边距边缘），而 img 默认 margin: 0，所以文字直接蹭到图片右边界。
-
margin必须加在img元素上，不是加在p或父容器里 - 左浮动时，只有
margin-right影响右侧文字间距；margin-left完全无效 -
img是 inline 元素，部分浏览器下margin不生效，必须同步加display: block - 避免用
margin: 12px这类简写——上下 margin 会把段落顶开，破坏行高对齐
margin-right 设多少才合适？
没有固定像素值，取决于字体大小、行高和设计呼吸感。常见可靠区间是 0.8em–1.2em 或 12px–20px，但要注意：
- 小字号段落（如
font-size: 14px）建议不低于0.5em，否则视觉上仍显拥挤 - 设
margin-right: 16px后若文字仍偏左，可能是父容器有text-align: justify或letter-spacing干扰 - 别忘了配
margin-bottom: 8px——否则下一段p会顶到图片底部，留出大片空白
为什么有时候加了 margin-right 还没用？
大概率是 HTML 结构或渲染上下文出了问题：
- 图片和文字不在同一个父容器里：必须同属一个
div，不能一个在section、一个在article - 父容器触发了 BFC 但高度塌陷：比如用了
overflow: hidden却没撑开高度，导致后续段落“掉下来” - 图片被富文本编辑器自动包进
p标签，变成p里——这时文字根本“看不见”浮动元素 - 父容器用了
display: flex或display: grid：浮动在 Flex/Grid 容器中基本失效，文字不会环绕
最易被忽略的一点：浮动元素的 margin 不是“给文字留空”，而是重新定义它自己的「可绕排边界」；这个边界一旦定死，后续所有文字行框都会按此对齐——调错一个像素，整段节奏就偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
