td/th禁止设float，否则破坏表格格式化上下文导致高度不齐、错位、边框断裂；clear: both在td上无效，因td非块级且clear无法修复结构破坏；应浮动td内子元素或改用display: table系列。
别给 td 或 th 设 float，这是绝大多数变形问题的根源。 浏览器对表格元素有固定渲染逻辑，float 会强制它脱离表格格式化上下文（table formatting context），直接导致单元格高度不齐、换行错位、边框断裂——这不是“没清干净”，而是从第一步就走错了路。
为什么在 td 里加 clear: both 没用
因为 clear 只对块级元素生效，而 td 默认是 display: table-cell；就算你强行设了 display: block，clear 也只能避开前面的浮动兄弟元素，无法修复因 float 破坏的表格结构本身。此时你看到的“变形”，其实是浏览器放弃按行/列约束渲染的结果。
-
clear: both加在td上基本无效——它既不是块级，也不在浮动元素之后的正常流中 - 试图用
::after伪元素在td内清除浮动，会进一步干扰表格盒模型，可能让单元格高度塌陷 - 哪怕临时“看起来对齐”了，后续加
padding、border或动态内容插入，大概率立刻复现错位
真要浮动，只浮动 td 内部的子元素
极少数场景下（比如单元格内右对齐一个图标 + 左侧文字），可对 td 的**子元素**浮动，而非 td 自身。这时需同步处理容器高度和对齐行为：
- 给
td加overflow: hidden或display: flex，防止内部浮动导致高度塌陷 -
text-align仍可作用于非浮动内容，但vertical-align对浮动子元素失效，需改用margin或transform微调垂直位置 - 避免在同一个
td里混用多个浮动方向（如float: left和float: right），容易触发重排异常
更稳的替代方案：用 display: table 系列模拟
如果你原本想靠浮动实现“多列等宽”或“单元格自适应”，display: table 系列属性语义正确、行为可控，且完全兼容 text-align 和 vertical-align：
.row { display: table-row; }
.cell { display: table-cell; width: 200px; text-align: center; vertical-align: middle; }
- 不用清除浮动，天然形成 BFC，不会塌陷
- 支持
border-collapse、table-layout: fixed等表格专属控制 - 若需响应式，配合
@media切换为display: block即可，比浮动降级更可靠
真正难处理的不是怎么“清”，而是发现 td 被加了 float 后还去调 clear——这等于在崩塌的地基上补墙漆。先删掉那行 float: left，再看问题是否还在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
