浮动图片导致文字首行“撞进”图片是因text-indent仍从容器左边缘计算，而浮动元素已占位；正确解法是用padding-left替代text-indent，并确保父容器触发bfc。
为什么浮动图片会让文字首行“撞进”图片里
根本不是文字缩进了，是文字在绕排浮动框时，text-indent 仍从容器左边缘起算，而浮动图片已经占位——结果第一行文字直接顶到图片右边，看起来像“缩进失效”或“撞进去”。中文段落习惯首行缩进 2em，但这个距离没避开浮动区域。
- 别给
<p></p>同时加text-indent和float相关 margin，两者逻辑冲突 - 真正要留出的空间，是图片宽度 + 间隙（比如
140px），不是靠text-indent模拟 - 如果只对首段做处理，后续段落会因浮动持续存在而全部错位，必须统一控制容器级偏移
怎么让文字绕图后还保持首行缩进
用 padding-left 替代 text-indent 是最稳的解法。它把整个文字内容盒往右推，缩进自然落在图片右侧空白区里，不受浮动影响。
- 给文字容器（如
<p></p>）设padding-left: 140px（数值 ≥ 图片宽 + 右侧 margin） - 再单独设
text-indent: 2em，此时缩进是在 padding 后的区域内计算，视觉对齐干净 - 避免用
margin-left推整个<p></p>：它可能让文字在小屏下溢出，且和父容器 BFC 触发逻辑打架
清除浮动没做对，缩进问题会反复出现
很多人只在图片后加 clear: both，但这只是把下一段文字“压到图片下面”，不是修复绕排。真正的缩进异常，往往源于父容器塌陷——它没包裹浮动元素，导致文字流基准漂移。
- 检查父容器是否用了
display: flow-root或overflow: hidden，否则浮动高度不被感知 -
clear: both必须加在需要“重置流”的块级元素上（比如图片后的<h3></h3>），不能只清图片自己 - CMS 输出的富文本常自带
float但没配套清除，DevTools 里看 computed height 是否为0最直观
响应式断点里缩进突然错乱
媒体查询只改图片 width 不够。浮动方向、文字容器宽度、padding-left 值都得同步调整，否则小屏下图片变窄，原来预留的 140px 就变成大片空白，或干脆撑破视口。
- 断点内重设文字容器
padding-left，例如大屏140px→ 小屏90px - 当图片宽度 ≤
80px时，环绕意义消失，建议直接取消float，改用display: inline-block+vertical-align: top - RTL 页面中，
float: left要换成float: right，否则文字从右往左绕，缩进方向反了
display: flow-root 没生效（比如被更早的 CSS 覆盖），文字就始终在“假想”的容器边界上计算缩进——这时改再多 padding 和 text-indent 都只是表面修补。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
