margin是控制浮动图片与文本间距的唯一有效手段，但必须加在正确方向、正确元素上，且前提是display: block已设置；左浮动时仅margin-right影响文字右侧间距，右浮动时仅margin-left起作用，同时需触发BFC并避免规则覆盖。
margin 是控制浮动图片与文本间距的唯一有效手段，但必须加在正确方向、正确元素上，且前提是 display: block 已设置。
为什么 float 后文字紧贴图片？不是没生效，是 margin 加错了位置
浮动图片的文字环绕行为只响应「外侧」边距：左浮动时只有 margin-right 影响文字右侧间距，右浮动时只有 margin-left 起作用。加反方向（比如左浮动却设 margin-left）只会把图片往左顶，文字更挤。
-
margin: 12px这种简写会同时作用于上下左右，顶部/底部 margin 可能撑高行框，导致段落错位 - 推荐显式写法：
margin-right: 16px; margin-bottom: 8px;（左浮动）或margin-left: 16px; margin-bottom: 8px;（右浮动） -
margin-bottom不是可选——它防下一段文字直接顶到图片底部，否则第二段会“掉下来”
为什么加了 margin 还没反应？先检查 display 和父容器
img 默认是 inline-replaced 元素，margin 在部分浏览器中对 inline 元素表现异常。不设 display: block，margin-right 很可能被忽略。
- 必须搭配：
float: left; display: block; margin-right: 16px; - 父容器若未触发 BFC（如没设
overflow: hidden或display: flow-root），浮动会塌陷，文字根本绕不起来——此时调margin没意义 - 检查是否有其他规则覆盖：比如父容器设了
font-size: 0，或文字容器有负margin抵消了图片的间距
多段文字环绕时第二段突然下沉？这不是 margin 的问题
第二段文字从图片底部开始排布，本质是浮动导致父容器高度塌陷，后续段落失去可用环绕空间。仅靠调整 margin 无法修复。
立即学习“前端免费学习笔记（深入）”；
- 给图片的**直接父容器**设
display: flow-root（现代最干净方案） - 或用伪元素清除：
::after { content: ""; display: table; clear: both; } - 避免用
height硬撑父容器——内容动态变化时极易出错 - 别在
p上直接加clear: both，这会让整段换行，破坏环绕逻辑
响应式下小屏间距崩坏？单位和逻辑都要重置
大屏有效的 margin-right: 16px 在 320px 屏幕上可能变成“右边空出 16px 却无处可绕”，文字只能强行折行。
- 在
@media (max-width: 768px)中统一移除浮动：float: none; margin-left: 0; margin-right: 0; - 让图片回归文档流，配合
text-align: center居中，文字自然上下排列 - 单位选
px还是rem：设计稿像素对齐 → 用px；需适配系统字体缩放 → 用rem；避免混用em
真正关键的点在于：间隙不是浮动“造成”的，而是你没告诉浏览器“文字该从哪开始绕”。margin-right 或 margin-left 就是那个明确的边界指令——但必须和 display: block、BFC 触发一起生效，缺一不可。
