<td>中float失效是因为table-cell不参与BFC且无视浮动规则；须用display:block或flow-root的div抽离渲染上下文，并设img和div宽度、避免td垂直对齐干扰。
表格单元格里直接用 float 让文字绕图基本无效——<td> 默认是 display: table-cell，它会忽略浮动规则，文字不会环绕，而是被挤到下一行或堆叠错位。
为什么 <td> 里的 float 失效
<td> 是表格单元格，渲染模型和普通块级容器不同。它不参与常规的 BFC（块级格式化上下文）构建，也不响应 float 的流式重排逻辑。哪怕你给 <img> 加了 float: left，文字仍按单元格内部行内流走，不会“绕”过去。
常见错误现象包括：图片靠左，文字却从下一行开始；或文字紧贴图片底部堆成一团；更糟的是，整列宽度被撑开、换行错乱。
-
<td>不是普通容器，不能直接当图文绕排的“画布” - 浮动失效不是 CSS 写错了，是布局上下文根本不支持
- 别在
<td>上硬加overflow: hidden或display: block—— 这会破坏表格结构，可能引发跨浏览器渲染差异
真正可行的绕过方式：用 <div> 抽离渲染上下文
必须把图文内容从 <td> 的默认渲染中“拎出来”，用一个 <div> 包裹，并显式切换为可支持浮动的布局模式。
立即学习“前端免费学习笔记（深入）”；
推荐写法：
<td>
<div style="display: block; width: 100%">
<img src="a.jpg" style="float: left; width: 120px; margin-right: 8px;">
<p>这里是环绕的文字……</p>
</div>
</td>
-
display: block是关键，让<div>脱离table-cell渲染流 -
width: 100%必须显式设置，否则浮动元素可能塌陷，文字无法识别环绕边界 -
<img>必须设width（不能只靠max-width: 100%），否则加载时占位塌陷，绕排先错后跳 - 避免给
<td>设vertical-align: middle等值——浮动元素基线对齐会偏移，导致图文错位
现代替代方案：display: flow-root 更干净
如果你不需要支持 IE 或老版 Safari（flow-root 在 Chrome 64+/Firefox 58+/Edge 79+/Safari 15.4+ 可用），这是目前最稳妥的解法。
它自动创建 BFC，既保留文字正常流式环绕，又避免父容器高度坍缩问题：
<td>
<div style="display: flow-root">
<img src="a.jpg" style="float: left; width: 120px; margin-right: 8px; margin-bottom: 4px;">
<p>这里是环绕的文字……</p>
</div>
</td>
-
margin-bottom加在<img>上，能防止文字紧贴图片底边，提升可读性 - 别给
<p>设margin-top—— 它会撑开flow-root高度，破坏紧凑感 - 若需兼容 Safari 15.3 及更早版本，回退到
display: inline-block+vertical-align: middle组合，但要注意父<div>的font-size: 0间隙控制
表格列宽不稳定时怎么保绕排效果
文字环绕极度依赖容器宽度。表格列宽受内容、table-layout 和浏览器计算影响，容易导致换行错乱、绕排突然崩掉。
- 给
<td>显式设width（如width: 300px）或min-width，比靠内容撑开更可控 - 配合
word-break: break-word或overflow-wrap: break-word，防长单词撑破列宽 - 禁用
border-collapse: collapse时的外边距截断问题：浮动图片的margin-right可能被表格边框吃掉，建议改用padding或额外<span>包裹留白 - 响应式场景下，小屏优先放弃环绕，用媒体查询切回“图上文下”布局 —— 强撑绕排只会让文字变成窄条，可读性归零
表格里做图文环绕本质是“在不支持的环境里模拟支持”，所有方案都绕不开抽离上下文这一步。最容易被忽略的点是：<img> 的 width 必须明确、<div> 的 width 不能省、<td> 自身别动垂直对齐——漏掉任何一条，绕排就大概率失效。
