table元素不支持直接设置float，因display:table被规范禁止浮动；正确做法是包裹div后对div设float，或改用position:absolute、flex布局实现对齐与定位。
table 元素本身不支持 float 属性
直接给 <table> 写 <code>float: left 或 float: right 是无效的，因为 <table> 默认是块级元素，但它的 display 类型是 <code>table，而 CSS 规范明确禁止对 display: table 元素应用 float。浏览器会忽略该声明，表格仍按普通块级行为渲染。
常见错误现象：写完 table { float: right; } 却没反应，检查 computed styles 会发现 float 值仍是 none。
- 正确做法是把
<table> 包进一个 <code><div>，再对这个 <code><div> 设置 <code>float - 或者改用
display: inline-block或display: block强制转换显示类型（但会丢失部分表格语义和自动列对齐能力） - 注意：
float会导致父容器高度塌陷，必须配合clear或overflow: hidden等清除手段 - 给表格加
style="position: absolute; top: 20px; right: 10px;"，就能稳定贴右上偏移 - 若需随滚动保持位置（如悬浮操作栏），改用
position: fixed，此时参考点是视口而非父容器 - 避免同时设
top和bottom，或left和right——这会让浏览器无法确定尺寸，可能压缩表格宽度 -
.container { display: flex; justify-content: flex-end; }→ 表格右对齐 -
.container { display: flex; justify-content: center; }→ 表格水平居中 -
.container { display: flex; justify-content: space-between; }→ 多个表格两端分布 - 注意：如果容器高度受限，且希望表格垂直居中，加
align-items: center -
margin-left: auto仅对display: block元素有效；原生<table> 不响应 <li>即使强制设成 <code>display: block，margin-left: auto会让它右对齐，但无法实现文字环绕（这是 float 的核心用途） - 更严重的是：表格列宽可能因脱离表格渲染上下文而错乱，特别是含
colspan/rowspan或百分比宽度时
用 position: absolute 实现精确浮动定位
这是最可靠、最可控的方式，尤其适合让表格“悬浮”在页面右上角、左下角等固定位置。
关键前提是：父容器（通常是 <div>）必须设置 <code>position: relative，否则 absolute 会相对于 定位，容易失控。
用 flexbox 让表格在容器内自动靠边或居中
当表格需要在某个区域（比如卡片、面板）内灵活对齐时，flex 是比 float 更现代、更稳定的方案。
不需要改表格本身的 display 类型，只需包裹它的父容器启用 flex：
为什么不要用 margin 模拟浮动效果
有人试图用 margin-left: auto 或 margin-right: auto 把表格“推”到一侧，但这只在特定条件下生效：
真正需要图文环绕（比如文字绕表格左侧排版），唯一合规路径是：用 float 包裹容器 + 清除后续流 + 手动控制周围段落的 clear 或 margin。
