float: left 在 rtl 下贴右是因为它指向逻辑左而非物理左，ltr 时逻辑左=视觉左，rtl 时逻辑左=视觉右；应改用 float: inline-start 并确保父容器设置 direction。
float: left 在 RTL 下为什么贴右而不是左
因为 float: left 指的是“往当前文本方向的逻辑左”浮动，不是物理左。LTR 下逻辑左 = 视觉左；RTL 下逻辑左 = 视觉右。所以你在 direction: rtl 容器里写 float: left，元素会贴到容器右侧边缘——这不是 bug，是 CSS 书写模式的定义行为。
用 float: inline-start 替代 float: left 才真正响应 RTL
硬写 float: left 或 float: right 都无法随 dir 自动切换，必须改用逻辑值：
-
float: left→float: inline-start（推荐，语义清晰，自动映射） -
float: right→float: inline-end - 但前提是父容器有明确的
direction或dir属性，否则浏览器按默认 LTR 解析，inline-start就等于left，看起来“没翻转” - 不支持
float: inline-start的老浏览器（如 IE11）需降级 fallback：[dir="rtl"] .my-float { float: right; }
清除浮动在 RTL 下容易失效的真相
clear: both 在 direction: rtl 环境中实际清的是逻辑侧，clear: left 清的是容器右侧，极易误判导致布局错乱：
- 常见现象：后续内容被浮动元素遮挡，
clear: both不生效 - 优先用 BFC 方式清除：
overflow: hidden、display: flow-root或contain: layout - 避免依赖
clear做布局控制，尤其在混合 LTR/RTL 切换场景下 - Safari 早期版本对
direction+float+clear组合存在兼容性偏差，BFC 是更稳的选择
真正可控的 RTL 浮动适配方式：别用 float
浮动本身不支持镜像，所谓“翻转”只是 direction 改变块流后产生的副作用。现代项目应主动弃用：
- 用
display: flex+flex-direction: row-reverse配合:root[dir="rtl"]切换，主轴方向天然响应 - 用
display: grid，其列顺序（grid-template-columns）和自动流（grid-auto-flow）默认受direction影响 - 若必须保留 float（如 legacy 代码），包裹整个浮动区域并加
transform: scaleX(-1)，但要逐层重置子元素：.mirror * { transform: scaleX(-1); }，否则文字反向不可读 - 图标、箭头等装饰性内容不能靠
float或direction翻转，得单独处理：transform: scaleX(-1)或换 SVG 资源
最常被忽略的一点：浮动元素脱离文档流，而 direction 对脱离流的元素只影响其内部内联内容排布，不影响定位锚点。所以即使写了 float: inline-start，如果父容器没设 direction，它就只是个没上下文的 left —— 这不是写错了，是漏了触发条件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
