直接改float: left为float: right不能实现镜像布局，真正起作用的是direction: rtl改变块级上下文逻辑流向，使float: left贴视觉右；更可控的视觉镜像应使用transform: scaleX(-1)并嵌套修复文字，同时注意点击区域仍按原始坐标响应。
直接改 float: left 为 float: right 不会实现镜像布局，反而会让元素堆叠错乱或换行异常——因为 float 本身没有“镜像”语义，它只按当前书写方向推挤元素。
为什么 float: left 在 RTL 容器里看起来像“翻转”了？
这不是 float 自身行为变化，而是 direction: rtl 改变了整个块级格式化上下文的逻辑流向：float: left 始终贴“逻辑左”，在 RTL 下逻辑左 = 视觉右；float: right 同理贴视觉左。所以真正起作用的是 direction，不是 float 值。
- 必须给浮动元素的**最近块级父容器**设
direction: rtl，不能只设或中间某层，否则可能被 reset -
float值本身无需改动：原float: left的元素加direction: rtl后自动视觉右对齐 - 内联内容（文字、
<input>、图标）也会被 RTL 影响，需用direction: ltr单独覆盖子元素 - Safari ≤15.3 对
direction+float的清除行为有偏差，可能出现clear: both失效
用 transform: scaleX(-1) 替代 float 镜像更可控
当目标是纯视觉镜像（比如按钮组、图标序列），transform: scaleX(-1) 比依赖 direction 更干净：它不改变文本流、不干扰表单控件方向、也不影响光标定位。
- 必须写全
transform: scaleX(-1)，不能简写成transform: scale(-1)，否则 Y 轴也被翻转 - 文字会同步镜像，需嵌套修复：
.mirror { transform: scaleX(-1); } .mirror * { transform: scaleX(-1); } - 变换后点击区域仍按原始坐标响应——看着鼠标在右边，实际触发左边，这是最常被忽略的交互陷阱
- 若父容器有
overflow: hidden，镜像后超出部分会被裁剪，因为变换不移动盒模型边界
响应式图文切换别用 float + direction
想在移动端把“左图右文”变成“右图左文”，靠 float + direction 会破坏 DOM 顺序和可访问性。屏幕阅读器仍按 HTML 顺序读取，但视觉已颠倒。
立即学习“前端免费学习笔记（深入）”；
- 优先用
order属性配合 Flex 布局：.image { order: 2; } .text { order: 1; }，再用媒体查询切换 -
flex-direction: row-reverse会全局翻转子元素顺序，导致链接、按钮、表单控件交互区域错位 - 如果必须保留 float，建议用
margin-left/margin-right手动模拟位置交换，但需配合max-width和calc()应对响应式断点
真正需要镜像时，先问自己：是要适配 RTL 语言，还是仅做视觉翻转？前者用 direction + 逻辑属性（如 margin-inline-start）；后者直接上 transform: scaleX(-1)，但务必处理好文字和点击坐标这两个硬伤。
