float:left在RTL下贴右是因为它指向逻辑左而非物理左，LTR时逻辑左=视觉左，RTL时逻辑左=视觉右；真正适配应使用float:inline-start或flex/grid布局。
float:left 在 RTL 下为什么贴右而不是左
因为 float: left 指的是“往当前文本方向的逻辑左”浮动，不是物理左。LTR 下逻辑左 = 视觉左；RTL 下逻辑左 = 视觉右。所以你在 direction: rtl 容器里写 float: left，元素会贴到容器**右侧边缘**——这不是 bug，是 CSS 书写模式的定义行为。
仅靠改 float 值无法实现可靠镜像
常见误区是把 float: left 改成 float: right 来“适配 RTL”，但这样会导致：
- 在 LTR 环境下原本靠左的元素，突然跑到右边，破坏原有布局
- 多个浮动元素的流式顺序错乱，换行位置不可控
- 清除浮动（
clear: both）的行为在 Safari 早期版本中可能失效 - 无法同步翻转文字、图标、表单控件等内联内容的方向
真正可控的 RTL 浮动适配方式
现代做法应避开物理方向值，优先用逻辑属性或结构级控制：
- 用
float: inline-start替代float: left，它会随direction自动映射到逻辑起点 - 配合
[dir="rtl"] .my-thing { float: inline-end; }做显式覆盖，比硬写float: right更语义清晰 - 更推荐直接弃用 float：改用
display: flex+flex-direction: row-reverse（需配合:root[dir="rtl"]切换），或display: grid（天然响应direction的自动流） - 若必须保留 float 且需视觉镜像，用
transform: scaleX(-1)包裹整个容器，再对子元素逐层反向修正，但要注意这会让元素脱离文档流、影响点击热区和文本可读性
容易被忽略的兼容性细节
即使写了 float: inline-start，也得确认父容器有明确的 direction 或 writing-mode，否则浏览器按默认 ltr 解析，inline-start 就等于 left，看起来“没翻转”——其实它工作正常，只是上下文没触发逻辑方向切换。
立即学习“前端免费学习笔记（深入）”；
