float 在 RTL 容器中不自动视觉右对齐，而是贴逻辑右（即视觉左）；镜像布局需配合 direction 或 transform 抵消，现代推荐 flex-direction: row-reverse。
float 右浮动元素在 RTL 容器里不自动反向？
不是所有“右浮动”都会视觉上“靠右”，关键看父容器的 direction。默认 ltr 下 float: right 是贴浏览器右边缘；但设了 direction: rtl 后，float: right 实际会贴容器的“逻辑右”——也就是视觉左。这不是 bug，是 CSS 书写模式的正常行为。
-
float: left在direction: rtl容器中会出现在视觉右侧 -
float: right在direction: rtl容器中会出现在视觉左侧 - 仅靠改
float值无法“镜像排列”，必须配合direction或显式重写浮动方向
用 float 实现左右对称镜像（比如头像+文字倒置）
常见需求：同一组元素，在页面 A 正常左图右文，在页面 B 变成右图左文——但不想改 HTML 结构。这时候不能只翻转 float，否则顺序错乱、换行异常。
- 先确保父容器有明确宽度和
overflow: hidden（防塌陷） - 给子元素统一加
float: left，再用transform: scaleX(-1)翻转整个容器（注意：这会翻转文字，需对子元素单独transform: scaleX(-1)补救） - 更稳妥的做法：用
float: right+margin-right模拟“反向流”，但必须手动计算间距，响应式下极易错位
示例：
.mirror-group { direction: rtl; text-align: right; }<br>.mirror-group > * { float: left; direction: ltr; }这样既保持 DOM 顺序，又让视觉布局镜像。
float 镜像后文字被反向、图标错位怎么办
transform: scaleX(-1) 是最直接的镜像手段，但它会把文字、SVG、伪元素全部水平翻转，导致中文镜像、箭头朝错方向。这不是 float 的问题，而是变换副作用。
立即学习“前端免费学习笔记（深入）”；
- 对文字内容，必须在子元素上加
transform: scaleX(-1)抵消（即“翻两次”） - 对图标字体（如 Font Awesome），优先改用
content+ Unicode 或 SVG 内联，避免依赖字符方向 -
float本身不触发重排，但transform可能触发合成层，低端安卓 WebView 有兼容风险
现代替代方案比 float 镜像更可靠
纯靠 float 做镜像本质是 hack，尤其在 Flexbox / Grid 普及后，它的问题更明显：清除浮动麻烦、垂直对齐难、响应式断点易失效。
- 用
display: flex+flex-direction: row-reverse替代，语义清晰且不翻转文字 - 需要兼容 IE10+？可用
order属性手动调换子项顺序，比算float间距安全得多 - 真要镜像整个区块（含边框、阴影等），用
transform: scaleX(-1)+ 子元素抵消仍是最快方案，但别指望float来兜底
复杂点在于：镜像不是单纯“左右互换”，它涉及书写方向、文本渲染、图标语义、可访问性（aria-label 不能因视觉翻转而变）——这些 float 一个都管不了。
