float: left在RTL下贴右是因为其“left”指逻辑左而非物理左，RTL文本流起始侧为视觉右侧；应改用float: inline-start实现自动适配。
float:left 在 RTL 下为什么贴右而不是贴左？
因为 float: left 是物理方向值，不是逻辑方向——它永远指文档流的“逻辑左”，而 RTL 文本流的起始侧是视觉右侧。所以你在 dir="rtl" 容器里写 float: left，浏览器照字面执行：把元素塞到当前行内起始位置，也就是阿拉伯语用户看到的右边。
怎么让 float 自动适配 LTR/RTL？
用逻辑值替代物理值：
-
float: inline-start→ LTR 时等效float: left，RTL 时自动变成贴右 -
float: inline-end→ LTR 时等效float: right，RTL 时自动变成贴左 - 老浏览器（如 Safari
示例：
.sidebar {
float: inline-start; /* ✅ 主流浏览器自动适配 */
}
<p>.sidebar {
float: left; /<em> ❌ 回退：LTR 有效，RTL 错位 </em>/
float: inline-start; /<em> ✅ 覆盖上一行，现代浏览器生效 </em>/
}不改 float，只靠 direction: rtl 有用吗？
没用。仅设 direction: rtl 不会翻转 float: left/right 的行为，它只影响：text-align 默认值、inline-block 排序、Unicode 双向算法，但对浮动、定位、边距等物理属性完全无感。
立即学习“前端免费学习笔记（深入）”；
常见误操作：
- 在
<body dir="rtl">里继续写float: left—— 元素仍会贴右 - 以为加了
direction就能“全局镜像”——实际只有部分属性响应
现代项目还该用 float 做布局吗？
绝大多数场景不该。浮动本质是为图文环绕设计的，不是布局工具：
- 多列、导航栏、卡片网格 → 优先用
display: flex或display: grid - RTL 适配更简单：
flex-direction: row-reverse或justify-content: flex-end配合逻辑属性 - 如果必须保留 float（比如兼容 IE11），就别指望它自动适配 RTL；老老实实按语言切换 class，写两套规则
真正容易被忽略的是：逻辑属性（如 float: inline-start）依赖祖先节点的 direction 或 dir 设置才能生效——如果父容器没声明方向，它就退化成 float: left，而且不报错。
