中float失效是因为table-cell不参与bfc且无视浮动规则；须用display:block或flow-root的div抽离渲染上下文，并设img和div宽度、避免td垂直对齐干扰。

表格单元格里直接用 float 让文字绕图基本无效——<td> 默认是 <code>display: table-cell，它会忽略浮动规则，文字不会环绕，而是被挤到下一行或堆叠错位。

为什么 <td> 里的 <code>float 失效

<td> 是表格单元格，渲染模型和普通块级容器不同。它不参与常规的 BFC（块级格式化上下文）构建，也不响应 <code>float 的流式重排逻辑。哪怕你给 <img> 加了 float: left，文字仍按单元格内部行内流走，不会“绕”过去。

常见错误现象包括：图片靠左，文字却从下一行开始；或文字紧贴图片底部堆成一团；更糟的是，整列宽度被撑开、换行错乱。

• <td> 不是普通容器，不能直接当图文绕排的“画布” <li>浮动失效不是 CSS 写错了，是布局上下文根本不支持</li> <li>别在 <code><td> 上硬加 <code>overflow: hidden 或 display: block —— 这会破坏表格结构，可能引发跨浏览器渲染差异

  真正可行的绕过方式：用 <div> 抽离渲染上下文 <p>必须把图文内容从 <code><td> 的默认渲染中“拎出来”，用一个 <code><div> 包裹，并显式切换为可支持浮动的布局模式。 <p>推荐写法：</p> <pre class="brush:php;toolbar:false;">&lt;td&gt; &lt;div style=&quot;display: block; width: 100%&quot;&gt; @@##@@ &lt;p&gt;这里是环绕的文字……&lt;/p&gt; &lt;/div&gt; &lt;/td&gt;</pre> <ul><li> <code>display: block 是关键，让 <div> 脱离 <code>table-cell 渲染流

  width: 100% 必须显式设置，否则浮动元素可能塌陷，文字无法识别环绕边界

  <img src="a.jpg" style="max-width:90%"> 必须设 width（不能只靠 max-width: 100%），否则加载时占位塌陷，绕排先错后跳

  避免给 <td> 设 <code>vertical-align: middle 等值——浮动元素基线对齐会偏移，导致图文错位

  现代替代方案：display: flow-root 更干净

  如果你不需要支持 IE 或老版 Safari（flow-root 在 Chrome 64+/Firefox 58+/Edge 79+/Safari 15.4+ 可用），这是目前最稳妥的解法。

  

  Wechat Article Html

  将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

  下载

  它自动创建 BFC，既保留文字正常流式环绕，又避免父容器高度坍缩问题：

  <td>
    <div style="display: flow-root">
      @@##@@
      <p>这里是环绕的文字……</p>
    </div>
  </td>

  • margin-bottom 加在 <img> 上，能防止文字紧贴图片底边，提升可读性
  • 别给 <p></p> 设 margin-top —— 它会撑开 flow-root 高度，破坏紧凑感
  • 若需兼容 Safari 15.3 及更早版本，回退到 display: inline-block + vertical-align: middle 组合，但要注意父 <div> 的 <code>font-size: 0 间隙控制

    表格列宽不稳定时怎么保绕排效果

    文字环绕极度依赖容器宽度。表格列宽受内容、table-layout 和浏览器计算影响，容易导致换行错乱、绕排突然崩掉。

    • 给 <td> 显式设 <code>width（如 width: 300px）或 min-width，比靠内容撑开更可控
    • 配合 word-break: break-word 或 overflow-wrap: break-word，防长单词撑破列宽
    • 禁用 border-collapse: collapse 时的外边距截断问题：浮动图片的 margin-right 可能被表格边框吃掉，建议改用 padding 或额外 <span></span> 包裹留白
    • 响应式场景下，小屏优先放弃环绕，用媒体查询切回“图上文下”布局 —— 强撑绕排只会让文字变成窄条，可读性归零

    表格里做图文环绕本质是“在不支持的环境里模拟支持”，所有方案都绕不开抽离上下文这一步。最容易被忽略的点是：<img src="a.jpg" style="max-width:90%"> 的 width 必须明确、<div> 的 <code>width 不能省、<td> 自身别动垂直对齐——漏掉任何一条，绕排就大概率失效。 <img><img> </td>