不能在 td 或 th 上直接设 float，会导致单元格高度塌陷、文字挤顶、相邻单元格错位、table-layout: fixed 下列宽失效；clear: both 对 td 无效，overflow: hidden 在旧版 Safari/IE 中不触发 BFC 且可能裁剪绝对定位内容；推荐用内层 div + display: flow-root 创建 BFC，兼容现代浏览器；IE11 可用 .clearfix 替代；最优解是改用 flex 或 grid 布局。
td 里直接用 float 会出什么问题
不能在 td 或 th 上直接设 float，这不是“清不清”的问题，而是模型冲突：表格单元格不是块级格式化上下文（BFC）触发器，浮动子元素一脱离文档流，td 高度就塌陷——可能只剩行高，文字被挤到顶部，相邻单元格错位，table-layout: fixed 下列宽还会失效。更糟的是，clear: both 对 td 本身完全无效，overflow: hidden 在旧版 Safari/IE 中不触发 BFC，还可能裁剪 position: absolute 的下拉菜单。
推荐做法：在 td 内加一层 div 并设 display: flow-root
这是现代项目最干净的解法，不改结构、不加 class、无副作用：
-
display: flow-root显式创建 BFC，包裹内部浮动子项，让td正确撑高 - 不会隐藏溢出内容（不像
overflow: hidden），不影响 tooltip 或下拉框 - 不干扰 z-index 层级，也不触发滚动条或重绘异常
- Chrome 64+、Firefox 62+、Safari 15.4+、Edge 79+ 均原生支持
示例：
<td>
<div style="display: flow-root">
<span style="float: left">状态</span>
<button style="float: right">操作</button>
</div>
</td>
需要兼容 IE11？用 .clearfix 替代 flow-root
如果项目仍需支持 IE11，不要用 overflow: hidden 或 zoom: 1，而是在内层 div 上加类：
- 伪元素必须写全：
.clearfix::after { content: ""; display: table; clear: both; } - 避免用
display: block，它在部分浏览器中引发 margin 折叠 - 不用
height: 0或visibility: hidden，可能意外撑开空白 - 这个
div仍要放在td内部，不能把clearfix直接加在td上
真要绕过浮动？优先考虑 flex 或 grid 替代方案
浮动本就不该出现在表格单元格里——它暴露的是布局选型偏差。如果业务允许，直接重构为更可控的方式：
- 把需要左右对齐的按钮/标签抽出来，用
display: flex; justify-content: space-between渲染 - 若需响应式或复杂对齐，
display: grid; grid-template-columns: 1fr auto更稳定 - 避免在
td里塞float+margin-top: -Xpx微调，这会干扰 baseline 对齐，改用padding和box-sizing: border-box
真正难处理的从来不是怎么清浮动，而是为什么非得在 td 里用浮动——这个问题比清除方法本身更值得停下来确认一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
