float: right 按html顺序从右向左依次贴靠，导致dom靠前的元素视觉上最靠右；现代应改用display: flex + justify-content: flex-end替代，兼顾语义与可访问性。
float: right 的堆叠逻辑不是“从右往左排”，而是“按HTML顺序挨个往右贴”
浏览器处理 float: right 时，不会反转 DOM 顺序，也不会把元素按视觉需求重新排序。它只是**严格按 HTML 文档流顺序**，一个接一个地把元素往容器右边界“推”：第一个元素先贴到最右边，第二个元素只能挤在它左边，第三个再挤在第二个左边……以此类推。
结果就是：DOM 靠前的元素出现在视觉最右边，DOM 靠后的反而在左边。这不是 bug，是规范定义的行为——float 本质是文本环绕机制，不是布局工具。
- 常见错误现象：
<div>A</div> <div>B</div> <div>C</div>全设float: right，视觉上显示为 C-B-A（从左到右） - 屏幕阅读器、
:first-child、tabindex仍按 A-B-C 顺序工作，和视觉完全割裂 - JS 动态插入新元素时，必须用
prepend()才能保持视觉末尾，否则会插到最右边
为什么不能靠 direction: rtl 或 order 来修复
direction: rtl 确实会让 float: left 表现得像 float: right，但它改变的是整个块级格式化上下文的方向，副作用极强：内联文本、表单光标、省略号位置、甚至 text-align 都会翻转，不是单纯“调顺序”。
order 属性对浮动元素完全无效——它只作用于 Flex 和 Grid 容器内的子项，而浮动元素已脱离文档流，不参与 Flex/Grid 的排序逻辑。
- 别在父容器上加
direction: rtl试图“模拟右对齐”：会导致<input type="radio">组 tab 键切换顺序与视觉焦点分裂 -
flex-direction: row-reverse是真逆序，但前提是改用display: flex，不是给浮动元素加order - 混用
float和flex在 IE11 下解析极不稳定，部分样式可能直接失效
现代解法：两行 CSS 替换全部 float: right
移除所有子元素上的 float: right，给父容器加：
display: flex;<br>justify-content: flex-end;
这样既能保持原始 HTML 顺序（语义正确、可访问性完好），又能实现右对齐；若需视觉逆序（即 DOM 最后一个元素显示在最左边），则改用：
display: flex;<br>flex-direction: row-reverse;
- 必须确保父容器没设
overflow: hidden之类会触发 BFC 的属性，否则可能干扰 Flex 布局 - 含
.dropdown的导航不受影响，因为position: absolute不参与 Flex 布局 - Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+ 全部原生支持，无需前缀
真要兼容 IE8–IE9 时的底线操作
如果项目强制要求支持 IE8–IE9，且无法升级构建链，则只能保留浮动，但必须接受它无法让视觉顺序与 DOM 一致的事实：
- 父容器必须触发 BFC：
overflow: hidden或display: table，否则高度坍缩为 0 是必然结果 - 所有子项统一用
float: right，禁用float: left混用，避免换行错位 - 宽度计算要精确：
box-sizing: border-box+ 显式width+ 预留间隙，避免因 33.333% × 3 = 99.999% 导致折行
真正容易被忽略的是：浮动不是布局方案，它是为图文环绕设计的文本流脱离机制。拿它做导航栏、卡片列表或响应式栅格，迟早会在某个 gap、align-items 或媒体查询里卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
