多个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 <pre class="brush:php;toolbar:false;"><code><div style="float: right">B <pre class="brush:php;toolbar:false;"><code><div style="float: right">A <p>否则，<code>A 先渲染 → 占最右；<code>B</code> 再来 → 只能紧挨着 A 左侧；<code>C</code> 最后 → 挤到 B 左侧……最终 A 在最右，C 在最左，但你本意可能是 A 在最左。</code></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <h3>用 <code>display: flex</code> 替代多个 <code>float: right</code> 更可靠</h3> <p>浮动本就不适合多元素并排控制，尤其当数量动态或需响应式时。flex 布局天然支持反向排列且不脱离文档流：</p> <ul> <li>父容器加 <code>display: flex</code> + <code>flex-direction: row-reverse</code>，子元素自然从右往左排列</li> <li>无需关心 HTML 顺序，<code>order</code> 属性可任意调整视觉次序</li> <li>不会导致父容器塌陷，后续兄弟元素不会上浮压盖</li> <li>支持 <code>gap</code> 控制间距，比手动算 <code>margin</code> 稳定得多</li> </ul> <h3>如果必须用 <code>float</code>，务必检查容器宽度与元素总宽</h3> <p>多个 <code>float: right</code> 元素横向堆叠（而非并排）的另一个主因是：它们的总宽度（含 margin/padding/border）超过了父容器宽度。此时浏览器只能把后面的元素“换行”到下一行右侧——看起来像重叠在第一行下方。</p> <ul> <li>用开发者工具检查每个浮动元素的 <code>offsetWidth</code> 和父容器 <code>clientWidth</code> </li> <li>确认是否启用了 <code>box-sizing: border-box</code>，否则 padding/border 会额外撑宽</li> <li>临时加 <code>outline: 1px solid red</code> 查真实浮动区域（比 <code>border</code> 不干扰盒模型）</li> <li>避免用百分比宽度 + 大 margin 组合，小数像素四舍五入可能触发换行</li> </ul> <p>真正容易被忽略的是：你改了一个 <code>float: right</code> 元素的宽度，可能让整行布局重新折行——这种连锁反应在 flex 中几乎不存在，但在 float 中非常隐蔽。</p> </div></code>
