简单解析float:right 右对齐换行原因

比如有这样一段ASP代码：
<a href="#" title="<%#Eval("title") %>"><%#Eval("title") %></a>   
<span>[<%#Eval("dateline") %>]</span> 
<a href="#" title="<%#Eval("title") %>"><%#Eval("title") %></a>
<span>[<%#Eval("dateline") %>]</span>

对应CSS代码： 
....  span {  
   ...  
   float:right;   
   ...  
} 
...  span {
   ...
   float:right;
   ...
}

然而这样<span>...</span>的内容到了<a>...</a>下一行，这种问题最典型的就是出现在文章列表中标题和日期错行！

这个问题出现在IE8的兼容模式下，IE8和火狐都没有问题。

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

如果要让两者占据同一行:

1.要么你把span先于文本显示 ：<span style="float: right">2010-05-31</span>
2.要么把文本也设成float：<span style="float: left">PS打造炫酷效果-Photoshop-IT啦</span>