如何将包装元素中的两个元素向右浮动，在视觉和语义上保持元素的相同顺序？
<style>
.container { widht: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: right; margin: 0; }
</style>
<div class="container">
<p class="a">Simon</p>
<p class="b">Says</p>
</div>
渲染时，这将使内部元素按“Says Simon”的顺序出现，http://jsbin.com/eravan/1/edit。
【问题讨论】：
常见的修复方法是：
添加辅助元素
<style>
.container { width: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: left; margin: 0; }
.container .aux { float: right; }
</style>
<div class="container">
<div class="aux">
<p class="a">Simon</p>
<p class="b">Says</p>
</div>
</div>
http://jsbin.com/eravan/6/edit
这种方法的问题是多余的辅助元素本身。
语义混乱
<style>
.container { width: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: right; margin: 0; }
</style>
<div class="container">
<p class="b">Says</p>
<p class="a">Simon</p>
</div>
http://jsbin.com/eravan/9/edit
这是最糟糕的解决方案，不幸的是，也是最常见的解决方案（Ali Bassam comment 直接在下面证明了这一点）。
这些都不是正确答案。
【讨论】：
在父元素上设置text-align: right; 时，您还可以使用display: inline-block; 代替float。
【讨论】：
display: inline; display: inline-block 将是处理IEhasLayout 属性：haslayout.net/haslayout
另一种方法可能是使两个类成为绝对类并指定它们的位置？如果您的元素是固定大小的，这将相对简单。只是一个想法..
【讨论】：
这里有很多使用 flexbox 的可能性（包括视觉上重新排序的元素），所以您将采取的方法取决于周围的内容。但是 IE 直到版本 10 才支持它。
http://caniuse.com/#feat=flexbox
.container {
width: 200px;
height: 50px;
background: #333;
display: flex;
}
.container.a {
justify-content: flex-end;
}
.container p {
width: 50px;
height: 50px;
background: #f00;
margin: 0;
}
.container.b .a {
margin-left: auto;
}
<div class="container a">
<p class="a">Simon</p>
<p class="b">Says</p>
</div>
<hr />
<div class="container b">
<p class="c">Let's Play</p>
<p class="a">Simon</p>
<p class="b">Says</p>
</div>
http://jsfiddle.net/6NWmt/（不包括前缀）
【讨论】：