在TD中使用float会导致表格结构崩溃，因其使元素脱离文档流，破坏表格布局；应改用white-space、word-break等合法CSS属性控制文本换行，并通过flex或grid实现图文混排。
TD里用float会导致表格结构崩溃
直接在 <td> 或内部元素上设 float，表格会立刻“散架”——float 会让元素脱离文档流，而表格单元格依赖严格的流式布局来维持行列对齐。浏览器会尝试重排，但结果通常是列宽错乱、行高塌陷、边框错位，甚至整行消失。
这不是 bug，是 CSS 规范明确禁止的行为：float 在 <table>、<tr>、<td> 等表格相关元素上无效果（或触发未定义行为），现代浏览器大多直接忽略或降级处理。
真正控制文字环绕的合法方式只有 white-space 和 word-break
“文字环绕”在表格中实际指两件事：让长文本自动换行（不撑开列宽），或强制断词以适应窄列。必须用语义正确的 CSS 属性：
-
white-space: normal（默认）+word-break: break-word或word-break: break-all：前者优先保留单词完整性，后者强制在任意字符处断行 -
overflow-wrap: break-word（推荐替代word-break: break-word，语义更准确） - 配合
max-width设定单元格最大宽度，否则断行无效
示例：
立即学习“前端免费学习笔记（深入）”；
<td style="max-width: 120px; word-break: break-word;">这是一个超长且没有空格的字符串abcdefg...</td>
需要图文混排？别套在TD里浮动，改用 flex 容器
如果目标是让图片左/右浮动、文字环绕（类似 Word 效果），<td> 本身不是合适容器。正确做法是：
- 把
<td>当纯布局容器，内部用<div>包裹内容 - 给该
<div>设display: flex或display: grid，再用align-items/justify-content控制图文位置 - 若坚持传统浮动风格，把图片和文字都放进同一个
<div>，仅对该<div>设float，而不是<td>
错误写法：<td><img style="float:left"><p>文字</p></td> → 文字可能跑出单元格
正确写法：<td><div style="display:flex; gap:8px"><img><div>文字</div></div></td>
IE8–IE11 的兼容性陷阱
word-break: break-word 在 IE8–IE11 中不支持，必须用 word-break: break-all 替代；但后者会在英文单词中间硬切，体验差。解决方案：
- 加
hyphens: auto（需配合lang属性和字体支持） - 服务端预处理长字符串，插入零宽空格
或软连字符 - 避免在旧 IE 下依赖纯 CSS 断行，必要时用 JS 检测并手动插入换行符
最常被忽略的是：表格单元格的 table-layout: fixed 必须配合 width 才能生效，否则 max-width 和断行逻辑全失效。
