float 会让 宽度失效，因为 float 使元素脱离文档流，破坏表格布局算法，导致 width 等样式被忽略；display: table-cell 与 float 互斥，应改用 text-align、flex 或浮动子元素替代。
为什么 float 会让 <td> 宽度失效
<p>因为 <code><td> 是表格单元格，其宽度计算依赖于表格布局算法（<code>table-layout: auto 或 fixed），而 float 会将元素脱离文档流、转为块级浮动框——这直接破坏了表格的内部尺寸协商机制。浏览器无法再把浮动元素当作“参与列宽分配的单元格内容”来处理，于是 width、min-width 等样式在 <td> 上可能被忽略或表现异常。
<h3>用 <code>display: table-cell 替代原生 <td> 时千万别加 <code>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> 内部的子元素
<p>如果目标是让单元格里某个图标右贴边、文字左对齐，浮动对象必须是 <code><td> 的子元素（比如 <code><span></span> 或 <i></i>），而非 <td> 自身。
<pre class="brush:php;toolbar:false;"><td>
<span>主文本</span>
<span style="float: right;">→</span>
</td></pre>
<ul><li>浮动子元素不影响 <code><td> 的列宽计算，父容器仍参与表格布局
<li>注意清除浮动：若后续有换行内容，需在 <code><td> 上加 <code>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> 宽度分配，但要求显式设置列宽（如 <code><col style="width: 120px">） - 嵌套
<div> 在 <code><td> 中且设了 <code>width: 100%，但父<td> 宽度未固定，也会导致子元素拉伸失败 浮动本身就不该出现在表格结构层。真正棘手的是那些“以为加了 float 就能控制位置”，结果把表格布局引擎搞懵的情况——定位需求，交给 <code>position、flex或纯语义化对齐属性更稳妥。
