CSS中float時(shí)浮動(dòng)元素，浮動(dòng)元素的定位還是基于正常的文檔流，然后從文檔流中抽出并盡可能遠(yuǎn)的移動(dòng)至左側(cè)或者右側(cè)，這里和大家分享一下解決CSS中float:right屬性后右對(duì)齊換行問(wèn)題方法。

解決CSS中float:right屬性后右對(duì)齊換行問(wèn)題

◆問(wèn)題

在Chrome、Firefox下這個(gè)問(wèn)題沒(méi)有出現(xiàn)，但是在IE下就會(huì)出現(xiàn)，日期另起一行了。

◆原因分析

當(dāng)非float的元素和float的元素在一起的時(shí)候，如果非float元素在先，那么float的元素將被排斥也就是說(shuō)，你的span是float:right，但是你文本還是float:none。

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

把span先于文本顯示，即：

viewsourceprint?

1<divstyledivstyle="width:300px;margin-top:8px;"> 
 
<spanstylespanstyle="float:right;">2010-08-09</span>簡(jiǎn)明現(xiàn)代魔法</div> 
 

或者把文本也設(shè)成float：

viewsourceprint?

1<divstyledivstyle="width:300px;margin-top:8px;"> 
 
<spanstylespanstyle="float:left;">簡(jiǎn)明現(xiàn)代魔法</span> 
 
<spanstylespanstyle="float:right;">2010-08-09</span> 
 
<spanstylespanstyle="clear:both;"></span></div> 

關(guān)于浮動(dòng)的一些知識(shí)

"浮動(dòng)元素的定位還是基于正常的文檔流，然后從文檔流中抽出并盡可能遠(yuǎn)的移動(dòng)至左側(cè)或者右側(cè)。文字內(nèi)容會(huì)圍繞在浮動(dòng)元素周圍。當(dāng)一個(gè)元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補(bǔ)他原先的空間。"

"元素浮動(dòng)后將自動(dòng)轉(zhuǎn)為塊級(jí)元素。該元素可以被移動(dòng)至當(dāng)前行的左側(cè)或右側(cè)。屬性如下：float:left,float:rightorfloat:none"。

"你應(yīng)該為所有的浮動(dòng)元素設(shè)定寬度屬性（除非是＜img＞元素，因其具有隱含的寬度）。如果不設(shè)定寬度，結(jié)果將是不可預(yù)知的。"

"舉例來(lái)說(shuō)，浮動(dòng)元素應(yīng)該定義寬度屬性，不論是顯式指定的還是隱含的。另外，它會(huì)盡可能的水平的填充容器元素，就像非浮動(dòng)內(nèi)容那樣，不給其他內(nèi)容空間以圍繞它們。其次，和正常文檔流中的元素不同，浮動(dòng)元素的垂直邊距(margin)不會(huì)疊加。***，浮動(dòng)元素可以和臨近在正常文檔流中塊級(jí)元素重疊（譯注：浮動(dòng)元素不占任何正常文檔流空間，所以建議不要理解成重疊，而是騰空浮動(dòng)的概念。）。"

◆"首先我們要牢記的一件事情是，浮動(dòng)元素只能浮動(dòng)至左側(cè)或者右側(cè)，沒(méi)有浮動(dòng)至中間一說(shuō)，這是很多新手容易范的錯(cuò)誤。記住，最基本的規(guī)則，浮動(dòng)元素只能浮動(dòng)至兩側(cè)。"

"當(dāng)我們讓一個(gè)元素浮動(dòng)，它會(huì)往右或者往左浮動(dòng)直至遇到容器的邊緣。如果我們向同一方向再浮動(dòng)一個(gè)元素，它會(huì)浮動(dòng)直至碰到前一個(gè)浮動(dòng)元素的邊緣。如果我們浮動(dòng)更多的元素，他們將一個(gè)挨一個(gè)排列，但不久就會(huì)空間不足，當(dāng)該行已經(jīng)無(wú)法容納更多的浮動(dòng)元素，則下一個(gè)浮動(dòng)元素會(huì)換行繼續(xù)排列。"

Containingblocksorcontainingboxes："容器元素是指包含其他子元素的行級(jí)或塊級(jí)元素。。。。"

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

◆"由于浮動(dòng)元素不占據(jù)正常文檔流空間，所以浮動(dòng)元素前后那些未明確指定位置的塊級(jí)元素會(huì)占據(jù)浮動(dòng)元素本來(lái)應(yīng)該處在的位置，就好像它從來(lái)不曾存在過(guò)。而浮動(dòng)元素之后的那行會(huì)根據(jù)浮動(dòng)元素縮小寬度。浮動(dòng)元素之前的元素則會(huì)重新被排列，占據(jù)獨(dú)立的一行。（譯注：ie和ff在這種情況下的表現(xiàn)不盡相同）"

"如果當(dāng)前行的水平方向上沒(méi)有足夠的空間容納浮動(dòng)元素，則向下一行，直至有能容納該元素的行。"

"任何浮動(dòng)元素都不可能超過(guò)原來(lái)所處文檔留位置的上邊界。浮動(dòng)元素的頂端必定和當(dāng)前行頂端對(duì)齊（或者在沒(méi)有當(dāng)前行元素時(shí)和前一個(gè)塊級(jí)元素底部邊緣對(duì)齊）。"

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

"如果我們將Div中所有的列都加上float:left它們會(huì)挨個(gè)向左排列，如果我們希望在頁(yè)面底部有一個(gè)頁(yè)腳，并不需要一個(gè)最長(zhǎng)的列，只要加上clear:both就可以了"

"使用浮動(dòng)元素包含浮動(dòng)元素這樣的布局方式有一個(gè)潛在的缺點(diǎn)，即你的頁(yè)面是否能夠一直保持一致的展現(xiàn)效果將取決于瀏覽器的實(shí)現(xiàn)是否保持一致。特別是當(dāng)浮動(dòng)元素是一個(gè)更為復(fù)雜的布局中的一部分的話，將變得更加不堪一擊。"

關(guān)于浮動(dòng)清除

"浮動(dòng)元素之后的元素會(huì)自動(dòng)圍繞該浮動(dòng)元素。如果你不希望這樣，你可以為這些元素應(yīng)用'clear'屬性。該屬性有4種設(shè)值：clear:left,clear:right,clear:bothorclear:none"

有很多技巧可以做到清理浮動(dòng)元素，但不引入額外的無(wú)語(yǔ)義標(biāo)簽。下面3種是比較常見(jiàn)的做法：a)將容器元素一起浮動(dòng)b)在容器元素上使用overflow:hiddenc)使用:after這樣的css偽類。

"插入一個(gè)清理元素是使容器正確包裹所有浮動(dòng)元素的標(biāo)準(zhǔn)做法，這樣做具有將容器底部邊緣'拖拉'以包裹所含元素的效果。"

"對(duì)于基于浮動(dòng)設(shè)計(jì)的布局來(lái)說(shuō)，一個(gè)常見(jiàn)的問(wèn)題就是浮動(dòng)元素的容器不會(huì)自動(dòng)伸展來(lái)包含浮動(dòng)元素。如果你希望在所有的浮動(dòng)元素的外面加上邊框（例如，在容器元素上加上邊框），這樣你必須顯示的命令瀏覽器來(lái)伸展容器。你可以是用overflowmethod方法。"

使用:after想像一下我們使用:after來(lái)插入一個(gè)點(diǎn)號(hào)，并且設(shè)置它的屬性{clear:both;}。這就是所有你需要做的事情，但是沒(méi)有人會(huì)接受容器底部有那么一絲空隙，所以我們還要設(shè)置{height:0;}和{visibility:hidden;}來(lái)保證嚴(yán)絲合縫。
 

【編輯推薦】

1. CSS基礎(chǔ)：clip屬性用法剖析
2. 學(xué)習(xí)筆記 CSS書(shū)寫規(guī)范詳解
3. FireFox和IE中CSS兼容技巧匯總
4. CSS代碼整理及優(yōu)化七大原則
5. 深入剖析Firefox下 margin-top失效原因與解決方案