必须给浮动元素本身加方向明确的 margin，且要配合 display: block 和父容器 BFC 触发，否则任何间距调整都无效；左浮动时仅 margin-right 推开右侧文字，右浮动时仅 margin-left 推开左侧文字，加错方向或加在父容器上均无效。
必须给浮动元素本身加方向明确的 margin，且要配合 display: block 和父容器 BFC 触发，否则任何间距调整都无效。
为什么只加 margin-right（左浮动）或 margin-left（右浮动）才起作用
文字环绕的是浮动元素的「外边距边界」，这个边界由浮动方向的反向 margin 决定：左浮动时，文字从右侧流过来，真正推开文字的是 margin-right；右浮动时，文字从左侧流过来，起作用的是 margin-left。加错方向（比如左浮动却设 margin-left）只会把图片往左顶，文字更挤。
常见错误现象：
-
margin: 12px这种简写会同时作用于上下边，导致行高错位、段落下沉 - 只设
margin-bottom没用——它不影响环绕侧的文字水平距离 - 把
margin加在p或父容器上，对环绕间距零影响
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 左浮动图片：显式写
margin-right: 16px; margin-bottom: 8px; - 右浮动图片：显式写
margin-left: 16px; margin-bottom: 8px; - 务必加
display: block;——img默认是inline元素，部分浏览器下不生效
如何消除文字基线对齐导致的底部细缝
这不是 bug，是浏览器按规范将文字基线对齐到浮动元素底部后自然留出的垂直空间。此时 vertical-align 完全无效（因为浮动元素已脱离文档流，不是 inline 或 inline-block）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 从
margin-bottom: -2px开始试，逐步加负值（一般不超过-6px），直到缝隙视觉消失 - 搭配
display: flow-root在图片直接父容器上触发 BFC，防止因父容器塌陷干扰测量 - 避免用
line-height或font-size硬调——会破坏全局排版一致性
多段文字环绕时第二段突然掉到图片下方怎么办
这不是间距问题，是浮动撑不开父容器，导致后续段落从浮动元素底部开始排布，而非继续沿右侧流动。只调 margin 解决不了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给图片的**直接父容器**设
display: flow-root;（Chrome 64+/Firefox 58+ 支持，最干净） - 慎用
overflow: hidden：虽能触发 BFC，但可能意外裁剪带阴影或溢出动画的图片 - 如需明确结束环绕，在最后一段文字后加
<div style="clear: both"></div> - 不要在
p上直接加clear: both——这会让整段换行，破坏环绕
响应式下小屏文字挤成窄列、间距崩坏怎么修
媒体查询里只改宽度却不重置浮动相关样式，是常见翻车点。比如 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更稳妥
真正难的不是加多少 margin，而是搞清它作用在哪一层：是推文字行框，还是调浮动占位高度，还是防父容器塌陷——三者混在一起，一个值就可能引发连锁错位。
