CSS中float:right後靠右對齊換行問題

CSS中float時浮動元素，浮動元素的定位還是基於正常的文檔流，然後從文檔流中抽出並儘可能遠的移動至左側或者右側，這裡和大家分享一下解決CSS中float:right屬性後靠右對齊換行問題方法。

解決CSS中float:right屬性後靠右對齊換行問題

◆問題

在Chrome、Firefox下這個問題沒有出現，但是在IE下就會出現，日期另起一行了。

◆原因分析

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

如果要讓兩者在同一行的話，有兩種方法。

把span先於文本顯示，即：

<div style="width:300px;margin-top:8px;"><span style="float:right;">2010</span>簡明現代</div>  

或者把文本也設成float：

<div style="width:300px;margin-top:8px;">  <span style="float:left;">簡明現代</span>  <span style="float:right;">2010</span>  <span style="clear:both;"></span></div> 

關於浮動的一些知識

"浮動元素的定位還是基於正常的文檔流，然後從文檔流中抽出並儘可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文檔流中抽出後，仍然在文檔流中的其他元素將忽略該元素並填補他原先的空間。"

"元素浮動後將自動轉為區塊層級元素。該元素可以被移動至當前行的左側或右側。屬性如下：float:left,float:rightorfloat:none"。

"你應該為所有的浮動元素設定寬度屬性（除非是＜img＞元素，因其具有隱含的寬度）。如果不設定寬度，結果將是不可預知的。"

"舉例來說，浮動元素應該定義寬度屬性，不論是顯式指定的還是隱含的。另外，它會儘可能的水平的填充容器元素，就像非浮動內容那樣，不給其他內容空間以圍繞它們。其次，和正常文檔流中的元素不同，浮動元素的垂直邊距(margin)不會疊加。最後，浮動元素可以和臨近在正常文檔流中區塊層級元素重疊（譯註：浮動元素不佔任何正常文檔流空間，所以建議不要理解成重疊，而是騰空浮動的概念。）。"

//如果要轉載本文請註明出處,免的出現版權紛爭,我不喜歡看到那種轉載了我的作品卻不註明出處的人 Seven{See7di#Gmail.com}

◆"首先我們要牢記的一件事情是，浮動元素只能浮動至左側或者右側，沒有浮動至中間一說，這是很多新手容易範的錯誤。記住，最基本的規則，浮動元素只能浮動至兩側。"

"當我們讓一個元素浮動，它會往右或者往左浮動直至遇到容器的邊緣。如果我們向同一方向再浮動一個元素，它會浮動直至碰到前一個浮動元素的邊緣。如果我們浮動更多的元素，他們將一個挨一個排列，但不久就會空間不足，當該行已經無法容納更多的浮動元素，則下一個浮動元素會換行繼續排列。"

Containingblocksorcontainingboxes："容器元素是指包含其他子項目的行級或區塊層級元素。。。。"

"當明確指定時，浮動元素垂直位置由它原先在文檔流中的位置決定，頂端與當前行頂端對其。但是水平方向上，它儘可能遠的向容器元素邊緣移動，但是仍遵循容器元素的填充距離(padding)。同行的行內元素則圍繞浮動元素排列。"

◆"由於浮動元素不佔據正常文檔流空間，所以浮動元素前後那些未明確指定位置的區塊層級元素會佔據浮動元素本來應該處在的位置，就好像它從來不曾存在過。而浮動元素之後的那行會根據浮動元素縮小寬度。浮動元素之前的元素則會重新被排列，佔據獨立的一行。（譯註：ie和ff在這種情況下的表現不盡相同）"

"如果當前行的水平方向上沒有足夠的空間容納浮動元素，則向下一行，直至有能容納該元素的行。"

"任何浮動元素都不可能超過原來所處文檔留位置的上邊界。浮動元素的頂端必定和當前行頂端對齊（或者在沒有當前行元素時和前一個區塊層級元素底部邊緣對齊）。"

"想要真正理解浮動理論，你必須明白在CSS中什麼是行(linebox)。不幸的是，為瞭解釋什麼是行，你必須先明白什麼是行級元素。行級元素指的是那些非區塊層級元素，例如＜em＞而行是一個邏輯上的概念，是一個虛擬矩形，包含了組成該行的所有行級元素，其高度至少等於這些行級元素中最高的那個。"

"如果我們將Div中所有的列都加上float:left它們會挨個向左排列，如果我們希望在頁面底部有一個頁尾，並不需要一個最長的列，只要加上clear:both就可以了"

"使用浮動元素包含浮動元素這樣的布局方式有一個潛在的缺點，即你的頁面是否能夠一直保持一致的展現效果將取決於瀏覽器的實現是否保持一致。特別是當浮動元素是一個更為複雜的布局中的一部分的話，將變得更加不堪一擊。"

關於浮動清除

"浮動元素之後的元素會自動圍繞該浮動元素。如果你不希望這樣，你可以為這些元素應用'clear'屬性。該屬性有4種設值：clear:left,clear:right,clear:bothorclear:none"

有很多技巧可以做到清理浮動元素，但不引入額外的無語義標籤。下面3種是比較常見的做法：a)將容器元素一起浮動b)在容器元素上使用overflow:hiddenc)使用:after這樣的css偽類。

"插入一個清理元素是使容器正確包裹所有浮動元素的標準做法，這樣做具有將容器底部邊緣'拖拉'以包裹所含元素的效果。"

"對於基於浮動設計的布局來說，一個常見的問題就是浮動元素的容器不會自動伸展來包含浮動元素。如果你希望在所有的浮動元素的外面加上邊框（例如，在容器元素上加上邊框），這樣你必須顯示的命令瀏覽器來伸展容器。你可以是用overflowmethod方法。"

使用:after想像一下我們使用:after來插入一個點號，並且設定它的屬性{clear:both;}。這就是所有你需要做的事情，但是沒有人會接受容器底部有那麼一絲空隙，所以我們還要設定{height:0;}和{visibility:hidden;}來保證嚴絲合縫。