浮动元素脱离文档流导致父容器高度坍缩，使后续表格视觉错位；根本解法是给浮动元素的直接父容器添加clearfix类或改用flex布局，而非仅对表格设clear:both。
浮动元素撑不开父容器导致表格错位
这是典型因 float 脱离文档流引发的布局塌陷：浮动子元素（比如左导航栏、侧边广告）没被父容器“感知”，后续 <table> 会向上偏移，视觉上错位甚至重叠。
<p>根本原因不是表格本身有问题，而是它前面的浮动兄弟元素没触发 BFC 或清除浮动，让父容器高度坍缩为 0。</p>
<ul><li>检查错位表格前最近的父级是否包含 <code>float 元素（如 float: left 的 <div>）
<li>用浏览器开发者工具高亮该父容器，看其实际高度是否为 0 或远小于预期</li>
<li>临时加 <code>border: 1px solid red 到父容器，能立刻验证是否塌陷
用 clearfix 类强制闭合浮动
在浮动元素的父容器上添加 clearfix 类是最兼容、最稳妥的做法，尤其适合老项目或需支持 IE8+ 的场景。
标准 clearfix 写法（推荐 micro clearfix）：
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: table;
clear: both;
}
- 必须作用于浮动元素的**直接父容器**，而不是表格自身
- 不要只写
::after而漏掉display: table，否则在 IE 下可能失效 - 如果父容器已设
overflow: hidden，也能触发 BFC 闭合浮动，但会意外裁剪position: absolute子元素，慎用
改用 display: flex 或 grid 替代 float
现代布局中，float 已不推荐用于整体页面结构。把浮动容器换成 display: flex，表格自然回归正常流，无需 clearfix。
例如将两栏布局从浮动改为：
.layout {
display: flex;
}
.sidebar { flex: 0 0 200px; }
.main-content { flex: 1; }
-
flex容器默认形成 BFC，子元素不会脱离文档流 - 表格放在
.main-content内，不再受浮动干扰 - 注意
flex在 IE10+ 才有较好支持；若需 IE9 及以下，仍得回退到 clearfix
为什么给表格加 clear:both 不够用
有人试过在 <table> 上加 <code>clear: both，发现有时仍错位——因为 clear 只控制自身与**前面浮动元素**的垂直间距，不解决父容器塌陷问题。如果表格的父容器本身高度为 0，它再怎么 clear，也还是挂在“空气”里。
-
clear是“避让”，不是“撑开” - 错位根源在父级，不是表格自身
- 仅靠
clear会掩盖结构缺陷，后续加 margin/padding 容易再次出问题
margin 或 position，反而让结构越来越难维护。
