float:right 对 table 元素无效，因 CSS 规范限制其在表格显示类型上的应用；需外包 div 并对其浮动，或改用 Grid/Flex 布局实现图文混排。
float:right 对 table 元素无效，别白试了
直接告诉你结论：float:right 用在 <table> 上不会让表格右浮，更不会产生文字环绕效果。浏览器会忽略该声明——因为 <table> 默认是块级元素，但 CSS 规范明确限制了 float 在表格相关显示类型（如 table、table-cell）上的行为。你看到的“好像动了”，大概率是父容器或后续元素被影响产生的错觉。
真正能实现文字环绕表格的写法
要让文字绕着表格走，必须满足两个前提：表格得是「浮动的内联级盒子」，且周围有文本流。最可靠的方式是把 <table> 包进一个 <div>，再对这个 <div> 设置 float:right，同时确保表格本身不破坏流布局：
<div style="float:right; margin-left:1em;"><table>...</table></div>- 表格内部不要设
width:100%或过宽的固定宽度，否则会撑开父<div>，导致换行异常 - 文字内容必须和这个
<div>处于同一文档流（即不能用position:absolute或display:flex打乱流） - 如果表格后紧跟
<p>，记得加clear:both防止后续段落继续绕行
现代替代方案：CSS Grid 或 Flex 布局更可控
如果你控制得了 HTML 结构，用 display:grid 更稳妥，避免浮动带来的清除问题：
<div style="display:grid; grid-template-columns:1fr max-content; gap:1em;"> <p>这里是环绕的文字内容，会自动填满左侧区域。</p> <table style="align-self:start;">...</table> </div>
注意点：
立即学习“前端免费学习笔记（深入）”；
-
max-content让表格列宽自适应内容，避免溢出 -
align-self:start防止表格垂直居中，保持顶部对齐 - Grid 方案不依赖文档流，文字不会“绕”，而是按网格分区排布——视觉效果类似，但逻辑更清晰、易调试
容易踩的坑：margin/padding 和 box-sizing
即使浮动生效，表格边缘文字贴得太紧或太松，多半是没处理好盒模型：
- 默认
box-sizing:content-box下，padding和border会额外增加宽度，可能让浮动容器超宽换行 - 建议统一加
table { box-sizing:border-box; } -
float:right容器的margin-left是给文字留空隙的关键，但别用margin-right——它只影响自身位置，不影响文字环绕间距 - IE 中
float对<table>的兼容性更差，哪怕包了<div>也要测试
浮动表格的本质是借流式布局“骗”浏览器重排文字流，不是真让文字智能绕形。越复杂的嵌套或响应式场景，越容易失控——这时候不如承认：表格就该老老实实当块级元素，图文混排交给 Grid 或媒体查询分断更省心。
