clear属性对table元素无效，因其不参与浮动流清除；应给table父容器设clear或用flex/grid布局替代float。
clear属性对table元素根本不起作用
直接给 <table> 元素设置 <code>clear 是无效的，因为 <table> 默认是块级元素（<code>display: table），但它的盒模型行为不响应 clear —— 这个 CSS 属性只对浮动元素（float: left/right）或生成块级框的非浮动元素（如 div）在「清除浮动」时生效，而 <table> 本身不参与浮动流的清除计算。
<h3>真正起作用的是给table的父容器加clear</h3>
<p>常见场景是：左侧有个 <code>float: left 的导航栏，右侧表格内容被顶上去、错位。这时不能改 <table>，得控制它所处的布局上下文：
<ul><li>把 <code><table> 包进一个 <code><div>，给这个 <code><div> 设置 <code>clear: both
.table-wrapper::after {
content: "";
display: block;
clear: both;
}
overflow: hidden 或 overflow: auto，也能触发 BFC 隐式清除，但要注意溢出裁剪风险现代写法优先用flex或grid替代float布局
靠 clear 解决表格周围浮动问题，本质是在补救过时的布局模式。现在更稳妥的做法是：
- 把左右两栏（比如侧边栏 + 表格容器）放进一个
display: flex父容器，用flex控制流向和尺寸，彻底避开 float 和 clear 的耦合 - 表格本身无需任何
clear，也不用包裹额外 div —— 它只是 flex 项目之一 - 注意：旧版 IE（≤10）不支持 flex，如需兼容，仍得回退到
clear+ 包裹容器方案
检查是否误用了table的display值
如果表格表现异常（比如突然能被 clear 影响），大概率是手动改了 display：
-
display: inline-table或display: table-cell会让它变成内联级，此时clear依然无效（clear 不作用于内联元素） -
display: block强制转为块级后，clear才可能生效，但这会破坏表格语义和默认盒模型（比如border-collapse失效、单元格间距异常） - 除非有特殊排版需求，否则不要动
<table> 的默认 <code>display浮动布局和clear的交互逻辑容易让人误以为“给表格加 clear 就行”，实际生效的是容器级的清除行为；而真正省心的解法，是让表格不再处于浮动影响范围内——要么用 BFC 封装，要么直接换掉浮动。
