应使用 float: inline-start 替代 float: left，因其能根据 direction 自动映射为起始侧（LTR 左/RTL 右），需确保父容器有明确 direction，现代浏览器支持良好，旧版需双声明回退，禁用 transform 翻转替代。
用 float: inline-start 替代 float: left
直接写 float: left 或 float: right 是物理方向硬编码，无法响应 direction 变化。而 float: inline-start 会自动映射为当前文本方向的“起始侧”：LTR 下是左，RTL 下是右。同理，float: inline-end 对应末尾侧。
必须确保父容器有明确的 direction（比如 [dir="rtl"] 或 direction: rtl），否则浏览器按默认 LTR 解析，inline-start 就等于 left，看起来“没翻转”——不是失效，是上下文没触发。
-
float: inline-start在现代浏览器中支持良好（Chrome 87+、Firefox 89+、Safari 15.4+） - 不要混用：
float: inline-start和float: left同时存在时，后者会覆盖前者 - 旧项目升级时，可全局搜索
float:\s*left/float:\s*right，批量替换成逻辑值
配合 [dir="rtl"] 选择器做显式覆盖
当无法控制根元素 dir 属性（如第三方嵌入内容），或需要局部翻转时，用属性选择器比全局 direction: rtl 更安全。它只影响带 dir="rtl" 的容器及其后代，不干扰其他区域的文本流和表单控件行为。
示例：
.nav-item {
float: inline-start;
}
[dir="rtl"] .nav-item {
float: inline-end;
}
- 避免写
[dir="rtl"] .nav-item { float: right; }—— 这又退回到物理方向，失去逻辑适配意义 - 注意层级：如果中间某层元素重置了
direction（如direction: ltr），会打断继承链，inline-start行为将基于该层的方向重新计算 - 这个方案对 Safari 14 及更早版本兼容性较差，需加回退（见下一条）
兼容旧浏览器的回退策略
IE11 及 Safari ≤14 不支持 inline-start，必须提供降级。最稳妥的方式是双声明：逻辑值在前，物理值在后，靠 CSS 级联覆盖机制实现渐进增强。
.card {
float: inline-start;
float: left;
}
[dir="rtl"] .card {
float: inline-end;
float: right;
}
- 不能把物理值放前面，否则新浏览器会忽略后面的逻辑值
- 不要依赖
@supports检测float: inline-start，因为部分浏览器（如旧版 Safari）虽声明支持，但与direction组合时行为异常 - 清除浮动时慎用
clear: both：在 RTL 环境下它等价于clear: inline-start inline-end，但某些老引擎解析不稳定；优先用 BFC 方式（如overflow: hidden）
为什么不用 transform: scaleX(-1) 实现浮动翻转
这是常见误区。transform: scaleX(-1) 是纯视觉翻转，不改变文档流位置，也不影响 float 的计算逻辑。它会让元素“看起来”反了，但浮动锚点、文字方向、点击热区、焦点顺序全都不对。
- 文字会被镜像，需逐层
transform: scaleX(-1)修正，维护成本高 - 表单控件（如
）的图标和状态可能错位 - 它和
float无任何协作关系，属于完全不同的解决路径——适合静态图标翻转，不适合布局级方向适配 - 若真要用，必须配合
direction: rtl手动调正文本，否则出现“视觉右对齐 + 文字从右读”的混乱状态
真正动态响应文本方向的浮动控制，核心就两点：用 inline-start/inline-end 替代物理值，并确保方向上下文在最近块级祖先上生效。最容易被忽略的是中间层对 direction 的重置，以及清除浮动时仍沿用 clear: both 导致 RTL 下行为错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
