图文同级且图片在前是文字环绕的前提，需确保与文字标签（如）同属一个父容器且位于文字标签之前；图片须设display: block并配合方向性margin，父容器需触发bfc防塌陷，clear: both应加在需换行的块级元素自身而非图片上。
图文必须同级且图片在前
文字不环绕，90% 是 HTML 结构错了，不是 CSS 没写对。<img> 和文字（比如 <p></p>）必须在同一个父容器里，且 <img> 标签得写在文字标签前面。
✅ 正确：<div class="wrap">
<img src="a.jpg"><p>这段文字会绕图</p>
</div>
❌ 错误：<div class="wrap">
<p>文字在前</p>
<img src="a.jpg">
</div>——<p></p> 已经把文字包死了，<img> 被挤到外面，文字根本“看不见”它
CMS 或富文本编辑器常自动加 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>，务必用 DevTools 看 DOM 树真实层级，别信源码缩进
图片必须设 display: block + 方向性 margin
<img> 默认是 inline 元素，margin 在部分浏览器中不生效；文字环绕的是它的外边距边界，不是图片本身。
- 左浮动 → 必须写
display: block+margin-right: 16px（margin-left无效） - 右浮动 → 必须写
display: block+margin-left: 16px（margin-right无效） - 避免写
margin: 12px—— 上下margin会干扰行高，导致段落错位；推荐显式写margin-right: 16px; margin-bottom: 8px;
父容器必须触发 BFC 防塌陷
第一段绕得好好的，第二段却从图片底部开始？这不是文字问题，是父容器没“感知”到浮动元素高度，导致后续内容按原始文档流重新排布。
- 现代解法：给父容器加
display: flow-root（Chrome 64+/Firefox 58+/Safari 15.4+ 支持），干净无副作用 - 兼容旧浏览器：用伪元素清除，
::after { content: ""; display: table; clear: both; }，加在父容器上，别加在<img>或<p></p>上 - 慎用
overflow: hidden—— 它虽能触发 BFC，但可能裁剪position: absolute的下拉菜单、阴影等溢出内容
clear: both 必须加在需要换行的块级元素自己身上
clear 不是“清除浮动”，而是告诉当前元素：“你的上边界不准挨着任何浮动元素”。它只对块级元素生效，且必须加在需要换行的那个元素上。
- ✅ 正确：给后续的
<h2></h2>或<div> 加 <code>clear: both - ❌ 错误：给
<img>加clear: both—— 图片自己已经浮走了，clear对它无效 - ⚠️ 如果浮动后紧跟的是纯文本节点（没有
<p></p>包裹），clear无法作用 —— 必须先用块级标签包住那段文字 - 响应式断点里容易漏掉：
clear不会自动失效，必须同步写@media (max-width: 768px) { .text-block { clear: none; } }
浮动生命周期管理比写
float: left 本身更关键：图片是否会被后续内容“顶下来”、响应式缩放后 margin 是否还合理、屏幕阅读器能否正确读取图文顺序——这些都得靠结构语义 + 边界测试来验证，不能只看视觉对齐。
