浮动图片的 margin 必须加在 img 上，因文字环绕的是 img 的外边距边界；左浮动时仅 margin-right 有效，右浮动时仅 margin-left 有效；需设 display: block 且父容器触发 bfc 防塌陷；响应式下应移除浮动或改用 shape-outside。
浮动图片的 margin 必须加在 img 上，不是加在 p 或父容器上
文字环绕的是浮动元素的外边距边界，这个边界只由 img 自身的 margin-right（左浮动时）或 margin-left（右浮动时）决定。给 p 加 margin 完全无效——因为文字是行内流，只响应浮动元素的边距，不响应自己容器的边距。
常见错误现象：
-
img没设display: block，它仍是inline元素，部分浏览器下margin不生效 - 写了
margin: 12px，但上下边距干扰行高，导致段落错位，而你只盯着右侧间距 - 父容器用了
overflow: hidden触发 BFC，却意外裁剪了图片阴影或溢出内容
float 后文字“贴边”不是没加 margin，而是没加对方向
左浮动图片，只有 margin-right 控制文字右侧间距；右浮动图片，只有 margin-left 起作用。写反了、或用四值简写，都会让预期失效。
推荐写法（稳定生效）：
img.float-left {
float: left;
margin-right: 16px; /* 关键：控制文字右侧距离 */
margin-bottom: 8px; /* 防下一段文字顶上来 */
display: block;
}
不要写 margin: 0 16px 8px 0 —— 左侧的 0 虽然无害，但容易在后续维护中误改，且语义模糊。
多段文字突然“掉到图片下方”，其实是父容器塌陷，不是 margin 失效
浮动元素脱离文档流，若父容器没触发 BFC，高度会塌为 0，第二段文字就从顶部开始布局，看起来像“不环绕”。此时调 margin 毫无意义。
实操建议：
- 给图片的**直接父容器**设
display: flow-root（Chrome 64+/Firefox 58+ 支持，最干净） - 慎用
overflow: hidden：虽能触发 BFC，但可能裁剪子元素（如带box-shadow的图片） - 别在
p上加clear: both：这会让整段换行，破坏环绕
响应式下 margin 值失真，小屏文字挤成窄列
固定像素值（如 margin-right: 16px）在 320px 屏幕上，可能变成“右边空出 16px 却无处可绕”，文字只能强行折行。
应对方式：
- 媒体查询中统一移除浮动逻辑：
float: none; margin-left: 0; margin-right: 0;，让图文回归文档流 - 如需保留环绕，改用
shape-outside+clip-path，但注意 Safari 对shape-outside: circle()支持仍不稳定 - 测试时缩放至 200%，看
margin是否仍合理——rem或em比px更稳妥
浮动本身不控制文字排版逻辑，它只是让行内内容“绕开一个矩形区域”。真正决定间距的，是那个矩形的外边距边界；而这个边界能否被正确识别，取决于元素是否块级、父容器是否包含它、以及响应式断点是否同步重置。稍有遗漏，margin 就像写在空气里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
