是的，因为<td>默认display:table-cell会忽略float；解决方法包括：用div包裹并设display:block+width、改用inline-block+vertical-align、或现代方案display:flow-root创建BFC。
表格单元格里直接用 float 会失效？原因和绕过方式
HTML 表格的 <td> 默认是 display: table-cell，它会忽略 float 布局规则——所以你在 <td> 里对图片加 float: left，文字根本不会环绕，而是被“挤到下一行”或错位堆叠。
真正可行的解法是：把图文内容从 <td> 的默认渲染上下文中“抽出来”，用一个 <div> 包裹并设为 display: block，再在内部用 float 或现代方案控制流式关系。
- 必须给包裹
<div>显式设置width（比如100%），否则float元素可能塌陷导致文字不环绕 -
<td>本身不要设vertical-align: top以外的值，否则浮动元素基线对齐容易出偏移 - 如果表格有
border-collapse: collapse，记得检查浮动后外边距是否被意外截断
用 display: inline-block 替代 float 更稳但有细节陷阱
比起浮动，inline-block 在表格单元格中兼容性更好、行为更可预测，尤其适合小图+短文本场景。但它默认按基线（baseline）对齐，图片下方常留白，看起来像“悬浮”在文字上方。
关键修复就是重设对齐方式：
立即学习“前端免费学习笔记（深入）”；
- 给图片加
vertical-align: middle或top，而不是依赖默认值 - 确保父
<div>没有未重置的font-size，否则inline-block间隙会暴露（可设font-size: 0再在子元素里恢复） - 文字内容不能是纯文本节点，最好包一层
<span>并设display: inline-block; vertical-align: middle，保证对齐一致性
现代方案：display: flow-root + margin 控制图文间距
如果你只需让文字环绕图片、不强求 IE 支持，display: flow-root 是最干净的选择——它创建 BFC，让浮动图片不影响外部布局，同时保留正常文档流内的文字环绕能力。
示例结构：
<td>
<div style="display: flow-root">
<img src="a.jpg" style="float: left; margin-right: 8px; margin-bottom: 4px">
<p>这里是环绕的文字……</p>
</div>
</td>
-
flow-root在 Chrome 64+/Firefox 58+/Edge 79+ 可用，Safari 15.4+ 开始支持；老版本需回退到inline-block方案 -
margin-bottom对图片加一点下边距，能避免文字紧贴图片底部，提升可读性 - 不要给
<p>设margin-top，它会撑开flow-root高度，破坏紧凑感
表格列宽不稳定导致换行错乱？固定宽度 + word-break 是底线保障
文字环绕效果高度依赖容器宽度。表格列宽由内容自动计算时，图片尺寸 + 文字长度稍一变化，就可能触发意外换行，让原本环绕的文本突然跳到图片下方。
- 给
<td>设明确的min-width（如200px），比只设width更稳妥 - 长英文或 URL 容易撑破布局，加
word-break: break-word到文字容器上 - 避免在
<td>上用white-space: nowrap，它会直接禁掉换行，让环绕失效 - 如果图片是响应式的（
max-width: 100%），务必同步限制其父<div>宽度，否则缩放时图文比例会崩
实际项目里，最常被忽略的是 flow-root 的浏览器覆盖范围和 inline-block 的基线对齐细节——这两个点没调好，90% 的“文字不环绕”问题就出在这儿。
