span元素float:right 后右对齐换行原因及其解决

今天遇到一个奇怪的问题：

有个这样的布局：

<div>
这里是标题
<span class="right">这里是时间</span>
</div>

在FF 和 chrome 都正常，显示一行

可是到了IE下就不对了，变成了两行！

在网上找了些资料，算是明白了，具体如下：

原因:

当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥也就是说，你的span是float:right，但是你文本还是float:none

如果要让两者占据同一行，一般有两个解决方法:

第一种：把span先于文本显示

如：

<div>
<span class="right">这里是时间</span>
这里是标题
</div>

第二：把文本也设成float

如：

<div>
<span class="right">这里是时间</span>
<span class="left">这里是标题</span>
</div>