div中加入span靠右對齊後，換行顯示問題的解決

就類似說空間裡面模組中模組名靠左，編輯字樣出現在靠右，一般思路的話一定是認為通過<td>分開兩列，一個align=left,另一個align=right。後來我無意中發現有個東西叫<span>,比如實現模組的效果就可以：<div class="portlet" align="left">文章<span><a href="">編輯</a></span></div>;當然我們還需要一個CSS檔案去控制span的樣式：
.portlet span
{
float:right
}
這個時候就發現出現一個問題“文章”跟“編輯”不在同一行中！這下苦悶了！於是只好去搜了問題原因如下（以下內容摘自bolg）：

當非float的元素和float的元素在一起的時候，如果非float元素在先，那麼float的元素將被排斥
也就是說，你的span是float:right，但是你文本還是float:none

如果要讓兩者佔據同一行，一般有兩個解決方案:

第一種：把span先於文本顯示

如：

<div>
<span class="right">
其實百度是XX！！
</span>
Google會稍微x一些，部落格小子。
</div>

第二：把文本也設成float

如：

<div>
<span class="right">
其實百度是xx！！
</span>

<span class="left">

Google會稍微x一些，部落格小子。

</span>
</div>

為什麼會這樣呢？(以下內容摘自bolg)

Span本身雖然是內嵌元素,但加上浮動後它就變成了區塊層級元素了,所以才會自動換行,浮動元素的頂端不能高於先於它出現的浮動元素或段落的頂端