直接为<img>标签设置float:left/right可实现图文环绕，需确保浮动作用于图片本身、设置明确宽高、添加外边距，并将图片HTML置于文字前；父容器避免触发BFC，后续内容需清除浮动。
直接给 <img> 标签加 float: left 或 float: right 即可实现图片在文本块中左浮或右浮，文字会自动环绕。这是最简明有效的做法，但要注意几个关键细节才能稳定生效。
浮动必须作用在 <img> 本身
不能写在父容器（比如 <p> 或 <div>）上，否则文字不会绕排。浮动需直接加在图片标签的样式里：
<img src="a.jpg" style="float:left; margin-right:12px; width:180px;"><img src="b.jpg" style="float:right; margin-left:12px; width:200px;">
同时务必设置明确宽度，否则行内图片浮动后可能收缩异常；加上 margin 是为了留出文字间距，避免紧贴难读。
HTML顺序决定环绕起点
浮动图片必须写在段落文字内容的前面，浏览器才会从第一行开始让文字绕着它排布：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ✅ 正确：
<img ...><p>这里是正文……</p> - ❌ 无效：
<p>这里是正文……</p><img ...>（文字已结束，无内容可绕）
避免常见崩坏：父容器别“拦住”浮动
如果文字完全不绕、图片下沉、后续段落错位，大概率是父容器触发了 BFC（块级格式化上下文），把浮动截断了。典型情况包括：
- 父元素设置了
overflow: hidden、display: flex或display: grid - 浮动图片后面跟着空
<p></p>或仅含空格的标签 - 图片没设宽高，又用了
max-width: 100%，加载时占位塌陷导致重排
修复建议：移除父容器的 overflow 或 display 干扰；确保浮动后紧跟真实文本；用 width + height 或 aspect-ratio 固定尺寸。
后续内容需手动清浮以防错位
浮动只影响它之后的**文本流**，但后面的块级元素（如新 <p>、<div>）可能卡在图片下方。要在浮动区域结束后加清除：
- 简单法：
<div style="clear:both"></div>放在浮动图片所在段落之后 - 推荐法：给包含浮动图片的父容器加类
clearfix，配合伪元素清除（更语义、不加额外标签）
例如：.clearfix::after { content:""; display:table; clear:both; }
