float: right 会导致视觉顺序与 DOM 顺序不一致，因其按 HTML 顺序将元素逐个右推，后出现的先占右端；应改用 display: flex + justify-content: flex-end，语义清晰、响应可靠、兼容现代浏览器。
float: right 会让视觉顺序和 DOM 顺序不一致，这不是 bug，是它的工作机制决定的——别硬调 HTML 顺序来“凑合”，直接换 Flex 更省事、更可靠。
为什么 float: right 看起来顺序颠倒
多个 li 或 div 都设 float: right 时，浏览器按 HTML 顺序逐个把它们“推”到容器最右侧：后出现的元素先占右端，先出现的被挤到左边。结果就是视觉上从右往左排列，但 DOM 顺序仍是左→右。
- 屏幕阅读器、
tabindex、:first-child选择器都按原始 HTML 顺序工作，和你看到的完全对不上 - 父容器高度常塌陷为 0，因为浮动元素已脱离文档流
- 响应式断点里，稍一缩窄就换行错乱，
width和margin得反复调
别改 HTML 顺序，改布局方式
有人把 li 在 HTML 里倒着写，指望 float: right “恢复”顺序——这会让语义混乱、维护困难，且下拉菜单、JS 动态插入等场景立刻出问题。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 正确做法：父容器用
display: flex，子项保持原 HTML 顺序 - 右对齐只需加
justify-content: flex-end，两行 CSS 解决 - 务必移除所有子元素上的
float: right，否则会被 Flex 忽略（CSS 规范强制要求） - 含
.dropdown的导航不受影响，因为position: absolute不参与 Flex 布局
兼容性与混用陷阱
Flexbox 在 Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+ 全部原生支持；如真要兼容 IE10/11，可加 display: -ms-flexbox 前缀，但不推荐为新项目增加负担。
立即学习“前端免费学习笔记（深入）”；
- 绝对不要在同一个父容器里混用
float和flex：IE11 解析极不稳定，部分样式可能直接失效 - 也别用
direction: rtl模拟右对齐——它会反转所有内联文本方向、光标行为、省略号位置，副作用远超预期 - 如果必须支持 IE8–IE9，
float是唯一选项，但得接受它根本无法让视觉顺序和 DOM 顺序一致
真正容易被忽略的是：浮动不是“布局工具”，而是为图文环绕设计的文本流脱离机制。拿它做导航栏、多列卡片、响应式栅格，本质上是在对抗规范，迟早会在某个 gap、align-items 或媒体查询里卡住。Flex 一行 display: flex 就接管全局，比修十个 clear 和 overflow: hidden 更接近“写一次，跑明白”。
