多个float:right元素视觉“重叠”实为容器宽度不足导致纵向堆叠或溢出，并非z-index层叠；浏览器按DOM顺序逐个右贴，后声明者先占最右，先声明者被左挤，若总宽超限则换行堆叠，现代应优先用display:flex+row-reverse替代。
多个 float: right 元素为什么视觉上“重叠”？
这不是 z-index 层叠或定位冲突，而是 HTML 渲染顺序 + 浮动方向共同导致的**视觉错位**：浏览器从左到右解析 DOM，但每个 float: right 元素都会尝试贴住其包含块的**最右侧边界**。后声明的元素先占据右侧位置，先声明的被“挤”向左——如果容器宽度不足，它们就会纵向堆叠（看起来像重叠），或更常见的是：最左边那个被挤出视口。
float: right 的顺序必须和视觉顺序反过来写
浮动方向决定了渲染时的“抢占逻辑”。要让 A、B、C 从右到左依次排列（A 最右，C 最左），HTML 中必须按 C、B、A 的顺序书写：
<pre class="brush:php;toolbar:false;"><div style="float: right">C</code></pre> <pre class="brush:php;toolbar:false;"><code><div style="float: right">B</code></pre> <pre class="brush:php;toolbar:false;"><code><div style="float: right">A</code></pre> <p>否则，<code>A先渲染 → 占最右；
B 再来 → 只能紧挨着 A 左侧；C 最后 → 挤到 B 左侧……最终 A 在最右，C 在最左，但你本意可能是 A 在最左。
用 display: flex 替代多个 float: right 更可靠
浮动本就不适合多元素并排控制，尤其当数量动态或需响应式时。flex 布局天然支持反向排列且不脱离文档流：
立即学习“前端免费学习笔记（深入）”；
- 父容器加
display: flex+flex-direction: row-reverse，子元素自然从右往左排列 - 无需关心 HTML 顺序，
order属性可任意调整视觉次序 - 不会导致父容器塌陷，后续兄弟元素不会上浮压盖
- 支持
gap控制间距，比手动算margin稳定得多
如果必须用 float，务必检查容器宽度与元素总宽
多个 float: right 元素横向堆叠（而非并排）的另一个主因是：它们的总宽度（含 margin/padding/border）超过了父容器宽度。此时浏览器只能把后面的元素“换行”到下一行右侧——看起来像重叠在第一行下方。
- 用开发者工具检查每个浮动元素的
offsetWidth和父容器clientWidth - 确认是否启用了
box-sizing: border-box，否则 padding/border 会额外撑宽 - 临时加
outline: 1px solid red查真实浮动区域（比border不干扰盒模型） - 避免用百分比宽度 + 大 margin 组合，小数像素四舍五入可能触发换行
真正容易被忽略的是：你改了一个 float: right 元素的宽度，可能让整行布局重新折行——这种连锁反应在 flex 中几乎不存在，但在 float 中非常隐蔽。
