元素右浮动后排列顺序颠倒了？

<div class="box">
  <span style="float: left;">1</span>
  <span style="float: right;">2</span>
  <span style="float: right;">3</span>
</div>

以上代码渲染出来界面

为什么不是123而是132呢？

因为代码是按照从上到下的顺序执行的

1先左浮动贴在左 2右浮动贴右 3右浮动贴右 但是最右边被2占用了所以只能在2的旁边

解决方法

把右浮动的元素贴在最右边的写在上边

<div class="box">
  <span style="float: left;">1</span>
  <span style="float: right;">3</span>
  <span style="float: right;">2</span>
</div>