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