应给浮动图片添加与浮动方向一致的外边距，如左浮动配margin-right、右浮动配margin-left，且需避免单值margin干扰行高；首行缩进失效时改用p::first-line伪元素实现，图文混排首段可单独设text-indent:0。
float 文字环绕图片时，文字紧贴图片边缘怎么办
默认用 float: left 或 float: right 让图片脱离文档流后，文字会直接“蹭”到图片边界，没有呼吸感。这不是 bug，是 float 的原始行为：文字行框（line box）紧贴浮动元素的外边缘（margin edge），而非边框或内容区。
- 必须给图片加
margin，不能依赖父容器内边距或文字自身的padding -
margin要加在图片上，且方向需与浮动方向一致：左浮动配margin-right，右浮动配margin-left - 避免只设
margin一个值（如margin: 10px），容易误加到上下边，干扰行高对齐 - 实际常用写法：
margin-right: 16px（左浮动）或margin-left: 16px（右浮动）
img.align-left {
float: left;
margin-right: 16px; /* 关键：控制右侧文字距离 */
}
文字换行错位、首行缩进失效怎么调
float 会影响 text-indent 和段落首行表现——尤其当图片高度超过第一行文字时，第二段可能从图片底部才开始环绕，而第一段首行缩进会被“吃掉”。
- 不要对包裹文字的
<p></p>直接设text-indent，改用伪元素模拟：p::first-line { text-indent: 2em; }更稳定 - 若需首段不缩进（常见于图文混排导语），单独加类清除：
p.first-para { text-indent: 0; } - 图片高度远大于行高时，可用
clear强制后续段落从下一行完整开始：<p style="clear: both"></p>
现代布局下还该用 float 做文字环绕吗
float 仍是最兼容、最轻量的文字环绕方案，尤其需支持 IE11 或邮件模板等受限环境。但要注意：
- Flexbox 和 Grid 本身不支持原生文字环绕（
shape-outside是例外，但兼容性差） -
shape-outside可实现不规则绕排，但仅 Chrome/Firefox 支持较好，Safari 需加-webkit-shape-outside，且必须配合float才生效 - 真正想摆脱 float？目前没成熟替代；强行用
display: inline-block+vertical-align会导致基线错乱，调试成本更高
margin 值设多大才看起来“刚好”
没有固定值，取决于字体大小、行高和设计系统。经验参考：
- 中文正文（16px / 1.6 line-height）：
margin-left/right: 12–20px较自然 - 小图（≤120px 宽）建议不小于
12px，否则文字挤压感强 - 大图或标题图可拉到
24px，但需同步检查移动端是否过宽 - 别忘了响应式断点里重置：
@media (max-width: 768px) { img.align-left { margin-right: 8px; } }
绕排看着简单，但 margin 和 float 的交互非常敏感——少 1px 可能就显得局促，多 2px 又像留了空洞。实际项目里，最好把图片尺寸、字号、行高、margin 四者列成表格横向比对，而不是凭感觉调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
