左浮动图片必须用margin-right推开右侧文字，右浮动图片必须用margin-left推开左侧文字；上下边距不影响环绕距离，仅影响垂直位置，且图片需设display: block才能使margin生效。
float图片的margin哪边才真正影响文字间距？
左浮动图片只靠margin-right推开右侧文字，右浮动图片只靠margin-left推开左侧文字——上下边距不影响环绕距离，只影响图片自身垂直位置。很多人写margin: 10px，结果文字只从一边绕，另一边空着还纳闷为啥“没生效”。
-
float: left时，margin-right是唯一决定文字起始位置的参数 -
float: right时，margin-left才是关键，别错加到margin-right -
margin-top和margin-bottom会影响图片与上/下段落的垂直间隙，但不会改变文字行框与图片的水平贴合点 - 如果图片是
inline（默认），margin可能不生效，必须加display: block
为什么文字还是紧贴图片边缘？常见干扰项
不是代码写错了，而是被其他规则悄悄覆盖或浏览器默认行为干扰了。
- 父容器设了
overflow: hidden或display: flex，触发BFC，切断文本流，文字根本绕不进来 - 图片没设
display: block，还在inline baseline对齐，margin被忽略 - 文字容器（比如
p）有margin负值，或padding为0，抵消了图片的margin - 用了
vertical-align: middle之类——对float元素完全无效，纯属白加
首段缩进失效、换行错位怎么调？
text-indent在浮动图片下容易失效，尤其当图片高度超过第一行文字时，首行会被“吃掉”。这不是bug，是line box计算逻辑使然。
- 别给
p直接设text-indent，改用p::first-line { text-indent: 2em; } - 首段不想缩进（比如导语），单独加类：
p.first-para { text-indent: 0; } - 第二段卡在图片底部不换行？加
clear: both强制下移：<p style="clear: both"> - 图片太高导致末行塌陷？给图片加
vertical-align: top，再配明确line-height稳定行框
响应式场景下margin怎么不翻车？
小屏时margin-right: 16px可能让图片右侧留白过大，甚至把文字挤出视口——这不是浮动失效，是布局溢出。
立即学习“前端免费学习笔记（深入）”；
- 避免用
margin简写，优先单侧声明：margin-right: 16px比margin: 0 16px更可控 - 媒体查询里重置：
@media (max-width: 768px) { img.float-left { margin-right: 8px; } } - 极端小屏可直接取消浮动：
@media (max-width: 480px) { img.float-left { float: none; margin-right: 0; } } - 真要长期维护，别硬扛float，
shape-outside或display: flow-root更稳，但得查Safari兼容性
display: block和clear: both这两条——前者让margin生效，后者让下一段不卡在图片屁股后面。少了任何一个，都可能让调试时间翻倍。 
