float:right时换行问题新解,解决float块元素在非float块元素中浮动问题

做网站中,最常的莫过于显示最新的10条信息了,一般的形式如下:

<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >标题内容</a><span class=time>[2009-4-1]</span></li>

这样的列表,但我们希望,标题显示在左边,而time浮动到右边,然而实际上却出现了time在第二行右边显示,这是因为:

当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥。

针对这种情况,前人给出了一些办法,最好的是:

1、把要float的元素放在非float元素的前面，并设置time:float:right即：

<li><span class=time>[2009-4-1]</span><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >标题内容</a></li>

2、把a与span都应用float属性，一个float:left一个float:right实现了预期排列（但这里有一个BUG即，如果在</a>&nbsp;<span.....中间有个这样的空格，就会出错，可能是这东东有连接的作用）

这里给出另一种思路，特别对于，不想或不能把span内容到a内容前面的，这就是：

li:text-align:right

a:float:left

就搞定了，思路是把父级BOX设置内容右对齐（把time放到右边），再把<a>左对齐，就OK了

以前我们一直是在如果让span:float:right起作用，而现在就放弃它了，换成如果把a放到左边