浮动未清除导致表格错位是文档流塌陷问题：父容器浮动使后续表格被挤偏，需用 overflow:hidden 清除浮动或设 table 为 display:block 再 clear:both，避免混用 float 与 flex/grid。
表格在浮动容器里变形或换行错位
这是典型的浮动未清除导致的文档流塌陷问题。表格本身不参与浮动，但父容器浮动后，后续元素会“无视”它原本占据的空间，表格可能被挤到旁边、文字环绕、甚至整个错位到页面顶部。
常见现象：table 宽度突然变窄、td 内容堆叠、表格和上一个浮动块之间出现意外空白或重叠。
- 先确认是否真由浮动引起：给表格加
border: 1px solid red，再检查其父级是否有float: left或float: right - 不要给
table自己设float——它不是为浮动设计的，会导致width计算异常、text-align失效 - 优先用
overflow: hidden或overflow: auto清除父容器浮动，比伪元素更稳妥（尤其兼容 IE8+）
clear: both 不生效？检查 DOM 位置和 display 类型
clear: both 必须作用在浮动元素之后、且处于同一文档流中的块级元素上。如果把它加在 table 上却没反应，大概率是这两个原因。
-
table默认是display: table，不是块级元素，clear对它无效；需显式设为display: block - 若
table是浮动元素的子元素（比如写在float: left的div里），clear放在table上毫无意义——它得放在浮动容器外面 - 更可靠的做法：在浮动容器后面加一个空
div，设clear: both，或者直接给浮动容器设overflow: hidden
Flex 或 Grid 布局下还用 float？该换思路了
现在还用 float 做整体布局，等于主动给自己埋坑。表格错位只是表象，真正的问题是布局模型混用。
- 如果只是为了左右并排几个模块，用
display: flex替代float，表格放进去自然居中、不塌陷、响应式也简单 - 若必须兼容老浏览器（IE9 及以下），
float+overflow: hidden仍是底线方案，但别再往里面塞display: inline-block表格之类混合写法 - 注意
table-layout: fixed和浮动共存时，列宽可能被强制压缩——此时清除浮动后还需重设table的width为100%
伪元素清除法（::after）失效的三个典型场景
.clearfix::after { content: ""; display: table; clear: both; } 看似万能，但实际中常因细节翻车。
- 父容器设了
position: absolute或position: fixed，伪元素脱离文档流，clear失效 - CSS 预处理器（如 Sass）里写了
@extend .clearfix，但目标选择器没有继承::after的生成规则 - 用了
display: grid或display: flex的父容器，伪元素的display: table会被忽略，此时应改用display: contents或直接放弃伪元素
复杂点往往不在清除动作本身，而在浮动和表格之间夹着一层看不见的层叠上下文或定位上下文——查错时先看 computed style 里的 display 和 position，比反复试 clear 更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
