浮动图片的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单独控制，避免干扰行高
text-indent失效时别硬改p标签
设置了text-indent: 2em但首行缩进消失，大概率是因为浮动图片占用了第一行可用宽度，而text-indent作用于整段内容框起点，不是行框。强行给<p></p>加margin或padding也无效，因为文字是行内流，只响应浮动元素的margin。
正确做法是换用伪元素：
-
p::first-line { text-indent: 2em; }——更稳定，绕过行框干扰 - 首段不缩进（如导语）就单独设
p.first-para { text-indent: 0; } - 别依赖
line-height去“凑”缩进位置，它影响的是行高，不是缩进逻辑
多段文字环绕时第二段掉到图片下方怎么办
图片高度超过首段文字后，第二段文字默认从图片底部开始排布，而不是继续右侧环绕——这不是bug，是浮动元素脱离文档流后父容器塌陷的表现。只调margin解决不了这个问题。
必须配合清除浮动或触发BFC：
- 在最后一段环绕文字后加
<div style="clear: both"></div> - 更推荐给图片父容器设
display: flow-root（Chrome 64+/Firefox 61+/Safari 15.4+ 支持） - 兼容旧浏览器时用
.parent::after { content: ""; display: table; clear: both; }，只加在父容器上 - 避免用
overflow: hidden，可能裁剪position: absolute的下拉菜单、阴影等溢出内容
响应式场景下margin单位选rem还是px
rem适合需要随根字体缩放的场景（比如适配系统字体设置），但要注意：图片本身尺寸若用px固定，rem间距在小屏下可能显得过大；若图片用百分比宽，rem又可能因字号压缩导致间隙过小。
实操建议：
- 纯内容页、强调可访问性 → 用
rem（如margin-right: 1.5rem） - 设计稿严格像素对齐、图片宽高固定 → 用
px（如margin-right: 16px） - 避免混用
em，它继承父元素字号，嵌套深了容易失控
最容易被忽略的一点：所有这些margin调整都只对浮动图片本身有效，父容器不设display: flow-root或clear，再细的间距也救不了后续段落的错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
