表格单元格错位主因是误用float于表格元素，应停止对td/th/table设float，改用display:table系列、flex或grid布局；若必须用float则需清除浮动或触发BFC。
表格单元格错位通常不是因为 float 本身用于表格（<table>、<td> 等原生表格元素本就不该设 float），而是你可能在模拟表格布局（比如用 div + float 实现“类表格”结构），或误将浮动元素嵌入了表格内部。真正的修复方向是：**停止对表格单元格使用 float，改用语义正确、行为可控的布局方式。**
别给 td 或 table 元素设 float
<td>、<th>、<tr> 是表格专有元素，浏览器对其有固定渲染逻辑。强行加 float: left 会破坏表格格式化上下文（table formatting context），导致单元格脱离行/列约束，出现高度不齐、换行错位、边框断裂等问题。
- 检查 CSS 中是否写了类似
td { float: left; }或.cell { float: left; }并应用于表格内元素 - 直接删掉这些浮动声明——表格天然具备“自动对齐、等高、流式适应”的能力，不需要 float 来“撑开”或“并排”
用 display: table 替代 float 布局（推荐）
如果你原本用 float 是为了实现多列等高、自适应宽度的“伪表格”效果（例如商品列表、表单行），display: table 系列属性更语义清晰、行为稳定：
-
display: table→ 模拟<table> -
display: table-row→ 模拟<tr> -
display: table-cell→ 模拟<td>，自动等高、支持vertical-align、不会因内容撑开而错位
示例：
立即学习“前端免费学习笔记（深入）”；
.row { display: table; width: 100%; }
.col { display: table-cell; padding: 8px; vertical-align: top; }
/* 不需要 clear，也不怕内容高度不一 */如果必须用 float，就用 clear 清除浮动影响
仅适用于非表格场景（如侧边栏+主内容），且浮动元素未被父容器包裹时。错位常因父容器塌陷导致：
- 给浮动元素的**直接父容器**加
overflow: hidden或overflow: auto（触发 BFC） - 或在最后一个浮动元素后加空元素：
<div style="clear: both"></div> - 现代写法可用伪元素清除：
.clearfix::after { content: ""; display: table; clear: both; }，再给父容器加class="clearfix"
检查是否混淆了 flex / grid 与 float
新项目中，float 已基本被 display: flex 或 display: grid 取代。它们对齐精准、响应友好、无需清除：
- 横向排列用
display: flex，默认等高，flex-wrap: wrap支持折行 - 二维布局（行列都需控制）优先用
display: grid，用grid-template-columns定义列宽，简洁可靠
不复杂但容易忽略：表格就用表格语义，布局就用 flex/grid，二者混用 float 是多数错位的根源。
