float: left 在 rtl 下贴右不是 bug，因其按逻辑左浮动，ltr 时逻辑左=视觉左，rtl 时逻辑左=视觉右；应改用 float: inline-start 等逻辑值并确保父容器有 direction 属性。
不能靠改 float: left 为 float: right 实现“自动反转”，这会破坏 LTR 环境下的原有布局，且不响应 direction 变化。
为什么 float: left 在 RTL 下贴右不是 bug
因为 float: left 指的是“往当前文本方向的逻辑左”浮动，不是物理左。LTR 时逻辑左 = 视觉左；RTL 时逻辑左 = 视觉右。所以当父容器有 direction: rtl，float: left 的元素自然贴右——你不需要、也不应该手动改成 float: right。
- 改值会导致 LTR 页面布局错乱（原本靠左的元素跑到右边）
- 多个浮动元素的流式顺序在 RTL 下会混乱（比如导航菜单项顺序颠倒）
-
clear: both在 Safari 旧版中可能失效 - 文字、图标、表单控件等内联内容方向不会同步翻转
真正可控的写法：用逻辑值替代物理值
把 float: left 换成 float: inline-start，把 float: right 换成 float: inline-end。它们会随 direction 或 writing-mode 自动映射到对应物理边。
- 必须确保父容器有明确的
direction（如），否则inline-start默认按 LTR 解析，等于left -
float: inline-start在 Chrome 87+、Firefox 89+、Safari 15.4+ 均支持，无需前缀 - 不推荐仅靠
:dir(rtl)覆盖，因为它不继承，且 SSR 未注入dir属性时规则不生效
更推荐的替代方案：直接弃用 float
现代布局中，float 已非首选。用 display: flex 或 display: grid 天然适配 RTL：
-
flex-direction: row在direction: rtl容器中，主轴起点自动变为右侧 -
justify-content: start始终对齐逻辑起点（LTR 左，RTL 右） -
grid-column: 1 / 2始终指“从逻辑起点开始的第一条轨道”，视觉位置随dir自动调整 - 避免所有
left/right物理值，全面改用inline-start/inline-end、start/end
最容易被忽略的一点：即使写了 float: inline-start，如果父级没设 direction 或 dir 属性，它就只是 float: left，不会“看起来翻转”。这不是属性失效，是上下文缺失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
