td内不能用float，因其破坏表格渲染逻辑致高度塌陷、错位；clear和overflow无效或不可靠；应改用内层div+flow-root或clearfix，或重构为flex布局。
表格单元格（td 或 th）里用 float，基本等于主动触发布局隐患——它不会像真实表格那样自动闭合，反而会让容器高度塌陷、内容溢出、相邻单元格错位。直接给 td 加 clear: both 无效，加 float 更糟。
为什么 td 不能靠 clear 或 overflow 简单解决？
表格单元格不是普通块容器：clear 属性对 td 元素本身不生效（它不是块级格式化上下文的触发者），而 overflow: hidden 在部分浏览器（如旧版 Safari/IE）中对 td 的 BFC 触发不可靠，还可能意外裁剪 position: absolute 的下拉菜单或 tooltip。
-
td默认不创建 BFC，内部浮动子元素脱离文档流后，td高度会坍缩为 0 或仅包裹文本行高 - 给
td直接设float会破坏表格渲染逻辑，导致列宽计算异常甚至整行错位 -
table-layout: fixed下混用浮动，宽度请求被忽略，文字挤成一团是常态，不是清除没做好
真正有效的三层处理方案
不要试图“修” td，而是用一层新容器承接浮动逻辑：
- 在
td内部包一层<div>，设display: flow-root—— 这是最干净的解法，创建 BFC 包裹浮动子项，且不裁剪溢出内容，Chrome 64+/Firefox 58+/Safari 15.4+ 均支持 - 若需兼容 IE11，该内层
div改用.clearfix类，伪元素必须写全：.clearfix::after { content: ""; display: table; clear: both; } - 绝对禁止给
td设overflow: hidden+float组合，这在 IE8–11 中常导致列宽强制归零
浮动 + 表格时最易踩的三个坑
这些不是配置遗漏，而是模型冲突：
立即学习“前端免费学习笔记（深入）”；
- 在
display: table-cell（非真实td）里放浮动元素：它根本不会响应clear，必须用display: flow-root替换该table-cell，或在外层再套一层div - 同一行多个
td中，只给其中一个加浮动清除，其余未处理的td仍会因高度不一致导致整行视觉错位 - 浮动子元素含
margin-top: -Xpx微调时，会干扰td的 baseline 计算，使文字垂直对齐偏移——优先用border-box+padding替代负边距
真正难处理的不是怎么清浮动，而是表格结构里混入浮动这个动作本身——它暴露的是布局模型选型偏差。如果业务逻辑允许，把需要左右对齐的按钮/状态标签抽出来用 display: flex 单独渲染，比在 td 里硬塞 float 和 clearfix 可维护得多。
