float: left 实现图文环绕需满足四条件：图片标签必须在文字前；设 width 和 margin-right 避免塌陷与紧贴；父容器不能触发 bfc（如 overflow: hidden）；浮动后须清浮（推荐 display: flow-root）。
float: left 是让图片出现在文字左侧并实现环绕的最直接方式，但仅加这行样式大概率失效——关键在 HTML 顺序、宽高约束和浮动清除。
图片必须写在文字前面，否则不环绕
浏览器按 HTML 文本流顺序渲染，只有图片标签出现在段落 <p></p> 之前，文字才会从第一行开始绕排：
- ✅ 正确：
<img src="a.jpg" style="max-width:90%"><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 src="a.jpg" style="max-width:90%">（文字已结束，无内容可绕）
必须设 width + margin-right，否则图文紧贴或塌陷
float 不改变元素默认尺寸行为，未设宽高的 <img> 在浮动后可能收缩、错位，甚至被后续内容“顶”下去：
- 务必设置明确
width（如width: 180px），避免依赖max-width: 100%导致加载时占位塌陷 - 加
margin-right: 12px（或类似值）留出文字间距，否则文字会紧贴图片边缘，可读性差 - 不要设
margin-bottom——它在浮动中常被忽略，还可能触发意外重排
父容器别触发 BFC，否则浮动被截断
如果图片“沉底”、文字不绕、后续段落错位，大概率是父容器无意中触发了块级格式化上下文（BFC），把浮动框拦住了：
- 典型干扰样式：
overflow: hidden、display: flex、display: grid、display: table - 修复方法：移除这些属性；或改用更安全的
display: flow-root（专为包裹浮动设计，无副作用） - 若必须保留
overflow: hidden，请确认它不是为“清除浮动”而加的——那是过时做法，已有更优替代
浮动后必须清浮，否则影响后续块级元素
float 只影响它之后的**文本流**，但后面的 <p></p>、<div> 等块级元素会卡在图片下方，造成布局断裂：
<ul>
<li>简单法：在浮动图片所在段落末尾加 <code><div style="clear:both"></div>
display: flow-root，一行解决，不加冗余标签clear，那会把它“推”到下一行，失去环绕意义真正容易被忽略的是：浮动生效的前提是“有真实文字可绕”。如果段落太短、只有一两句话，或者父容器高度被硬编码卡死，环绕效果根本不会显现——这不是样式没写对，而是内容条件不满足。
