CSS中的float:right右对齐换行问题

CSS中float是浮动元素，浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧，这里和大家分享一下解决CSS中float:right属性后右对齐换行问题方法。
问题
在Chrome、Firefox下这个问题没有出现，但是在IE下就会出现，日期另起一行了。
原因分析
当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥也就是说，你的span是float:right，但是你文本还是float:none。
如果要让两者在同一行的话，举个简单的例子，假设在某一文章列表页，我们目标是要得到下面红颜色这行字的布局效果：
深圳发现一例人感染禽流感疑似病例    2010-08-09
有两种方法，1、把span先于文本显示，即：

1. <div style="width:300px;margin-top:8px;">
   
2. <span style="float:right;">2010-08-09</span>深圳发现一例人感染禽流感疑似病例
   
3. </div>

复制代码

2、或者把文本也设成float：

1. <div style="width:300px;margin-top:8px;">
   
2. <span style="float:left;">深圳发现一例人感染禽流感疑似病例</span>
   
3. <span stylee="float:right;">2010-08-09</span>
   
4. <span style="clear:both;"></span>
   
5. </div>

复制代码