float 会让 <td> 宽度失效，因为 float 使元素脱离文档流，破坏表格布局算法，导致 width 等样式被忽略；display: table-cell 与 float 互斥，应改用 text-align、flex 或浮动子元素替代。
为什么 float 会让 <td> 宽度失效
因为 <td> 是表格单元格，其宽度计算依赖于表格布局算法（table-layout: auto 或 fixed），而 float 会将元素脱离文档流、转为块级浮动框——这直接破坏了表格的内部尺寸协商机制。浏览器无法再把浮动元素当作“参与列宽分配的单元格内容”来处理，于是 width、min-width 等样式在 <td> 上可能被忽略或表现异常。
用 display: table-cell 替代原生 <td> 时千万别加 float
很多人为了“复刻表格样式”手动写 <div class="row"><div class="cell">…</div></div> 并设 display: table-cell，这时若给 .cell 加 float: left，同样会触发脱离文档流，导致列宽坍缩或错位。
-
float和display: table-cell互斥，CSS 规范明确禁止这种组合 - Chrome/Firefox 会静默忽略
float，但 Safari 可能渲染异常或报 warning - 真正需要“对齐”或“右推内容”，改用
text-align: right、margin-left: auto（配合display: flex）或position: relative微调
真要浮动内容，只浮动 <td> 内部的子元素
如果目标是让单元格里某个图标右贴边、文字左对齐，浮动对象必须是 <td> 的子元素（比如 <span> 或 <i>），而非 <td> 自身。
<td> <span>主文本</span> <span style="float: right;">→</span> </td>
- 浮动子元素不影响
<td>的列宽计算，父容器仍参与表格布局 - 注意清除浮动：若后续有换行内容，需在
<td>上加overflow: hidden或伪元素::after清除，否则可能撑高行高 - 现代更推荐用
display: flex+justify-content: space-between替代浮动，语义清晰且无清除烦恼
当表格列宽完全失控，优先检查 table-layout 和 white-space
很多所谓“宽度失效”，其实和浮动无关，而是由其他 CSS 干扰了表格渲染逻辑：
立即学习“前端免费学习笔记（深入）”；
-
table-layout: auto下，浏览器会根据内容伸缩列宽；加了长单词或未折行内容（white-space: nowrap）会导致整列撑开 —— 此时删掉float也无济于事 -
table-layout: fixed能强制按<col>或首行<td>宽度分配，但要求显式设置列宽（如<col style="width: 120px">） - 嵌套
<div>在<td>中且设了width: 100%，但父<td>宽度未固定，也会导致子元素拉伸失败
position、flex 或纯语义化对齐属性更稳妥。 
