应给浮动图片加margin-right（左浮动）或margin-left（右浮动），且必须加在img元素上、显式声明、配合display:block和父容器bfc触发，才能有效控制文字环绕间距。
float 后文字紧贴图片边缘，怎么加 margin 才有效
加了 float: left 但文字还是顶到图片边框上，不是 float 写错了，而是 margin 没加在对的位置。文字环绕的是浮动元素的「外边距边界」，这个边界由图片自身的 margin-right（左浮动时）或 margin-left（右浮动时）决定。
-
margin必须加在img元素上，不是加在p或父容器上 - 左浮动 → 只有
margin-right影响文字右侧间距；右浮动 → 只有margin-left起作用 - 避免用
margin: 12px这类简写：上下 margin 会干扰行高，导致段落错位 - 推荐显式写法：
margin-right: 16px; margin-bottom: 8px;，后者防下一段文字顶上来 -
img默认是inline元素，务必加display: block;，否则 margin 在部分浏览器中不生效
多段文字环绕时第二段突然下沉、留白过大
这不是文字“不环绕”，而是浮动撑不开父容器，导致后续段落从浮动元素底部开始排布，而非继续沿右侧流动。典型表现是第二段开头空一大块，或整段掉到图片下方。
- 给图片的**直接父容器**设
display: flow-root（Chrome 64+/Firefox 58+ 支持），这是最干净的 BFC 触发方式 - 慎用
overflow: hidden：它虽能触发 BFC，但可能意外裁剪子元素（比如带阴影或溢出动画的图片） - 不要在
p上直接加clear: both——这会让整段换行，破坏环绕 - 若需明确结束环绕，在最后一段文字后加
<div style="clear: both"></div>
响应式下小屏文字挤成窄列、间距崩坏
媒体查询里只改宽度却不重置浮动相关样式，是常见翻车点。比如 margin-right: 16px 在 320px 屏幕上变成“右边空出 16px 却无处可绕”，文字只能强行折行。
- 在
@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更稳妥
为什么 vertical-align 调不了缝隙，而 margin-bottom 负值反而有用
文字环绕时出现的细缝，本质是浏览器把文字基线对齐到浮动元素底部后自然留出的垂直空间，并非 bug。此时 vertical-align 仅对 inline 或 inline-block 元素生效，而 float 元素已是块级脱离流，vertical-align 完全无效。
- 真正起效的是微调
margin-bottom：从-2px开始试，逐步加负值（一般不超过-6px），往下拉文字行框 - 不同浏览器敏感度不同：同一值在 Firefox 中缝隙更明显，需单独调试
- 别碰
line-height或font-size去“凑”——会破坏全局排版一致性 - 如果项目已支持 Flex/Grid，优先用
display: flex; align-items: start;替代 float，彻底规避该问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
