应给浮动图片加margin-right（左浮动）或margin-left（右浮动），且必须加在img元素上、显式声明、配合display:block和父容器bfc触发，才能有效控制文字环绕间距。
float 元素的 margin 必须加在 img 上，且只生效特定方向
文字环绕的是浮动元素的「外边距边界」，这个边界由 margin-right（左浮动时）或 margin-left（右浮动时）决定。其他方向的 margin 不参与环绕计算。
常见错误是给包裹文字的 <p></p> 加 margin-left，这完全无效；或者对左浮动图片写 margin-left: 16px，视觉上毫无变化。
- 左浮动 → 只有
margin-right控制文字右侧间距 - 右浮动 → 只有
margin-left控制文字左侧间距 -
margin-bottom防止下一段文字顶上来，但别设太大，否则第二段会提前“回流”到图片下方 - 避免
margin: 12px这类简写：上下 margin 会干扰行高，导致段落错位
img 必须显式声明 display: block
默认情况下 <img> 是 inline 元素，部分浏览器（尤其是旧版 Safari 和 IE）中，margin 在 inline 状态下不触发块级外边距行为，导致间距失效。
加上 display: block 后，margin 才能按预期作用于整个浮动框边界。
- 不加
display: block，margin-right: 16px可能在 Chrome 看起来有效，但在 Safari 中完全没反应 - 如果同时用了
vertical-align（比如top），那必须配display: inline-block，但此时浮动逻辑会冲突，不推荐混用 - 现代项目里，
display: block+float是最稳定组合
多段文字环绕时第二段突然下沉，本质是父容器没触发 BFC
这不是文字“不环绕”，而是浮动撑不开父容器，导致后续段落从浮动元素底部开始排布，而非继续沿右侧流动。典型表现是第二段开头空一大块，或整段掉到图片下方。
解决方式不是给每段加 clear，而是让父容器形成 BFC，把浮动“兜住”。
- 首选
display: flow-root（Chrome 64+/Firefox 58+ 支持），干净、无副作用 - 慎用
overflow: hidden：它虽能触发 BFC，但可能意外裁剪子元素（比如带阴影或溢出动画的图片） - 不要在
<p></p>上直接加clear: both——这会让整段换行，破坏环绕 - 若需明确结束环绕，在最后一段后加
<div style="clear: both"></div>
响应式下小屏间距崩坏，关键在 media query 里重置浮动逻辑
媒体查询里只改宽度却不重置浮动相关样式，是常见翻车点。比如 margin-right: 16px 在 320px 屏幕上变成“右边空出 16px 却无处可绕”，文字只能强行折行。
小屏应放弃环绕，回归文档流，而不是硬调 margin。
- 在
@media (max-width: 768px)中统一移除浮动逻辑：float: none; clear: none; margin-left: 0; margin-right: 0; - 配合
text-align: center居中图片，文字自然上下排列 - 如需保留环绕效果，改用
shape-outside+clip-path，但注意 Safari 对shape-outside: circle()等支持仍不稳定 - 测试时重点看缩放 200% 后
margin是否还合理——像素值会失真，rem或em更稳妥
真正难控的不是 margin 数值，而是浮动与行框基线、BFC 触发、响应式断点三者的耦合关系。一个没处理好，文字就突然掉行或缝隙变大——这种问题往往要三者一起调，单改 margin 解不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
