元素 float:right 后右对齐换行原因

 

代码

< p  style ="width: 400px; height: 20px; text-align: left;" > 新闻新闻新闻 < span  style ="float: right" > 2007-08-18 </ span >< span  style ="clear: both;" ></ span ></ p >    
   
< p  style ="width: 400px; height: 20px; text-align: left;" >< span  style ="float: right" > 2007-08-18 </ span > 新闻新闻新闻 </ p >    

效果图：

原因: 

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

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

1. 要么你把span先于文本显示 ：<span style="float: right">2007-08-18</span> （示例第3行）
2. 要么把文本也设成float：<span style="float: left">新闻新闻新闻</span>

参考: http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/08/09/1795745.html 

 

 

转自：http://www.zvv.cn/blog/show-32-1.html