float 本身不支持镜像翻转，其 left/right 仅按容器文本方向逻辑定位；所谓“翻转”实为 direction: rtl 改变块级流后 float 的相对行为变化，真正可控的视觉镜像应使用 transform: scalex(-1) 配合子元素反向修正。
float 本身不支持镜像翻转，别被“方向切换”误导
直接说结论：float 的值只有 left 和 right，它只是把元素往容器左侧或右侧推挤，并不感知文字方向（LTR/RTL）或视觉镜像。所谓“用 float 实现镜像翻转”，本质是借力于 direction: rtl 或 dir="rtl" 触发的布局重排，而 float: left 在 RTL 容器里会表现得像 LTR 下的 float: right——但这不是翻转，是方向上下文切换。
真正起作用的是 direction + float 的组合行为
当父容器设置 direction: rtl 时，块级流从右向左，此时 float: left 的元素会贴到容器**右侧边缘**（因为“left”是相对于当前文本方向的逻辑左，而非物理左）。同理，float: right 会贴到左侧。这种“看起来翻转了”的效果，依赖于整个块格式化上下文的方向重定义。
- 必须给包含浮动元素的**最近块级祖先**设置
direction: rtl（不能只设 body 或 html，否则可能被中间层 reset） -
float值保持不变：想让原float: left的元素跑到右边？加direction: rtl就行，不用改 float 值 - 注意内联内容（如文字、
inline元素）也会被 RTL 影响，可能需单独用direction: ltr覆盖 - IE8+ 支持该行为，但 Safari 早期版本对
direction与float的交互有细微偏差（如清除浮动失效）
更可靠的做法：用 transform: scaleX(-1) 配合 direction 修正内容
如果目标是视觉上真正的水平镜像（比如翻转图标、按钮顺序），float + direction 不够可控：direction 会影响文本、表单控件、光标位置等；而 transform: scaleX(-1) 是纯视觉翻转，但会导致子元素文字反向——这时需要逐层反转回来：
.mirror-row {
transform: scaleX(-1);
}
.mirror-row * {
transform: scaleX(-1);
}
这个方案不依赖 float，也不改变文档流，适合静态镜像；但要注意：transform 会让元素脱离普通流（不影响后续浮动清除），且无法响应式翻转（比如仅在某些断点启用）时需配合媒体查询手动切 class。
容易踩的坑：清除浮动在 RTL 下失效
用 clear: both 清除浮动时，在 direction: rtl 环境中，clear: left 实际清的是逻辑左（即容器右侧），容易误判。常见错误现象：clear: both 不生效、后续元素仍被浮动元素遮挡。
- 优先用 BFC 方式清除：给父容器加
overflow: hidden或display: flow-root（现代写法） - 若必须用
clear，确认清除方向与当前direction一致；例如在 RTL 容器中，要清掉右侧浮动元素，应写clear: right，而不是凭直觉写clear: left -
::after伪元素清除法（content: ""+clear: both）在 RTL 下依然可靠，但需确保伪元素自身未被transform或direction干扰
复杂点在于：镜像需求常混杂 RTL 本地化、响应式、可访问性（如屏幕阅读器读序）三者，float 本身已属过时布局手段，真要支持双向镜像，建议直接用 flex-direction: row-reverse 或 grid 的 direction 配合 place-content，比硬拗 float 更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
