浮动图片的margin方向必须与浮动方向相反：左浮动用margin-right，右浮动用margin-left；单值margin会破坏行框，应明确指定方向；多段落环绕需清除浮动或触发BFC；text-indent失效时改用p::first-line；响应式中rem适合可访问性场景，px适合像素对齐。
float图片的margin方向必须和浮动方向相反
文字紧贴图片不是CSS没生效，是没加对margin。float: left时文字从右边流过来，真正起作用的是margin-right；float: right时文字从左边流过来，得靠margin-left推开。加错方向（比如左浮动却设margin-left）只会把图片往左顶，文字反而更挤。
常见错误：margin: 12px这种单值写法会同时作用于上下左右，顶部和底部的margin可能撑高行框、破坏段落对齐。应明确写：
-
margin-right: 16px（左浮动图片） -
margin-left: 16px（右浮动图片） - 垂直间隙用
margin-bottom: 12px单独控制，避免干扰行高
多段落环绕时，下一段文字顶到图片底部怎么办
图片高度超过首段文字后，第二段文字默认从图片底部开始排布，而不是继续右侧环绕——这不是bug，是浮动元素脱离文档流后父容器塌陷的表现。只调margin解决不了这个问题。
必须配合清除浮动或触发BFC：
立即学习“前端免费学习笔记（深入）”；
- 在最后一段环绕文字后加
<div style="clear: both"></div> - 更推荐给图片父容器设
overflow: auto或display: flow-root - 避免用
height硬撑父容器，内容动态变化时容易出错
text-indent失效时别硬改p标签
设置了text-indent: 2em但首行缩进消失，大概率是因为浮动图片占用了第一行可用宽度，而text-indent作用于整段内容框起点，不是行框。强行给<p>加margin或padding也无效，因为文字是行内流，只响应浮动元素的margin。
正确做法是换用伪元素：
-
p::first-line { text-indent: 2em; }—— 更稳定，绕过行框干扰 - 首段不缩进（如导语）就单独设
p.first-para { text-indent: 0; } - 别依赖
line-height去“凑”缩进位置，它影响的是行高，不是缩进逻辑
响应式场景下margin单位选rem还是px
rem适合需要随根字体缩放的场景（比如适配系统字体设置），但要注意：图片本身尺寸若用px固定，rem间距在小屏下可能显得过大；若图片用百分比宽，rem又可能因字号压缩导致间隙过小。
实操建议：
- 纯内容页、强调可访问性 → 用
rem（如margin-right: 1.5rem） - 设计稿严格像素对齐、图片宽高固定 → 用
px（如margin-right: 16px） - 避免混用
em，它继承父元素字号，嵌套深了容易失控
最易被忽略的一点：所有这些margin调整都只对浮动图片本身有效，父容器的padding、文字容器的margin全都不参与环绕间距计算。
