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，而是用一层新容器承接浮动逻辑：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 在 td 内部包一层 <div>，设 <code>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 可维护得多。