float不能用于表格单元格实现文字环绕，因其会破坏表格布局；仅当作用于整个元素时，才能使正文文字环绕表格；单元格内图文环绕需对图片而非设置float。

不能用 float 让表格内的文字“环绕”——这是个常见误解。HTML 表格单元格（<td>、<code><th>）本身是块级盒模型，<code>float 不会触发文字环绕效果，反而会破坏表格布局结构。

为什么 float 在 <table> 里基本失效 <p>表格渲染遵循 CSS Table 布局算法，<code>float 会把元素移出常规流，导致：
• <td> 浮动后脱离表格行（<code><tr>），常造成列宽塌陷或整行错位<br>• 相邻单元格的文字不会“绕着它走”，因为表格单元格不参与 BFC 外的文本流环绕逻辑<br>• 浏览器可能忽略 <code>float 或强制重置为 float: none（尤其在 strict mode 下）

真正能实现“文字环绕表格”的场景只有一种

让整个 <table> 元素浮动（而非内部单元格），使其成为页面中一个可被文本环绕的块级容器：<br>• 适用场景：侧边放一个小表格（如数据摘要），正文文字从右侧流过<br>• 必须配合 <code>width 和 margin 控制尺寸与间距，否则易撑满父容器
• 示例：

A	B
1	2

这里是正文文字，会沿着表格右侧流动……

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

注意：
• float 必须作用于 <table> 根元素，不是 <code><td> <br>• 后续段落需清除浮动（如加 <code><div style="clear: both"></div>），否则可能影响下方布局
• 现代推荐改用 display: inline-block 或 float + width 组合，更可控

想让单元格内文字“环绕图片”？这才是正确写法

如果目标是在某个 <td> 里放图+文环绕（比如产品表里左图右文），应：<br>• 把图片放在 <code><td> 内，设 <code>float: left（或 right）
• 图片必须有明确 width，否则文字不会换行环绕
• 单元格本身保持默认 display: table-cell，不加 float
• 示例：

<td>
  @@##@@
  <span>这行文字会绕着左侧图标显示……</span>
</td>

关键点：
• float 属于图片，不是 <td> <br>• 文字内容需是普通内联元素（<code><span></span>、<p></p>），不能是另一个块级表格元素
• 若文字不环绕，请检查是否意外设置了 overflow: hidden 或 display: flex 等阻止 BFC 的属性

表格的本质是结构化数据容器，不是排版工具。真要复杂图文混排，<table> 很快会变成维护噩梦——这时候该考虑用 <code>flex 或 grid 替代，哪怕只是套一层 <div> 包裹。 <img src="icon.png" style="max-width:90%"> </div>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！