CSS基礎(chǔ)知識(shí)——清除浮動(dòng)的技術(shù)

如果你很明確的知道接下來(lái)的元素會(huì)是什么，可以使用 clear:both; 來(lái)清除浮動(dòng)。這個(gè)方法很不錯(cuò)，它不需要 hack，不添加額外的元素也使得它有良好的語(yǔ)義性。當(dāng)然事情并不是都可以這樣解決的，工具箱中還是需要另外幾個(gè)清除浮動(dòng)的工具。

? 空div方法從字面來(lái)看，是一個(gè)空的 div。

。有時(shí)可能會(huì)用

或者一些其他元素，但是 div 是最常用的，因?yàn)樗鼪](méi)有瀏覽器默認(rèn)樣式；沒(méi)有特殊功能，而且一般不會(huì)被 css 樣式化。這個(gè)方法因?yàn)橹皇菫榱吮憩F(xiàn)，對(duì)頁(yè)面沒(méi)有上下文涵義而被純語(yǔ)義論者嘲笑。誠(chéng)然，從嚴(yán)格的角度來(lái)說(shuō)他們是對(duì)的，但是這個(gè)方法有效而且沒(méi)有任何傷害。 

? overflow 方法在父元素上設(shè)置 overflow 這個(gè) css 屬性。如果父元素的這個(gè)屬性設(shè)置為 auto 或者 hidden，父元素就會(huì)擴(kuò)展以包含浮動(dòng)。這個(gè)方法有著較好的語(yǔ)義性，因?yàn)樗恍枰~外元素。但是，如果需要增加一個(gè)新的 div 來(lái)使用這個(gè)方法，其實(shí)就和空 div 方法一樣沒(méi)有語(yǔ)義了。而且要記住，overflow 屬性不是為了清除浮動(dòng)而定義的。要小心不要覆蓋住內(nèi)容或者觸發(fā)了不需要的滾動(dòng)條。 

? 簡(jiǎn)單清除方法使用了一個(gè)聰明的 css 偽選擇符(:after)來(lái)清除浮動(dòng)。比起在父元素上設(shè)置 overflow，只需要給它增加一個(gè)額外的類(lèi)似于”clearfix”的類(lèi)。這個(gè)類(lèi)使用如下 css: 

? .clearfix:after {

?     content: ".";

?     visibility: hidden;

?     display: block;

?     height: 0;

?     clear: both;

}

這會(huì)在清除浮動(dòng)的父元素之后應(yīng)用一點(diǎn)看不見(jiàn)的內(nèi)容。這不是全部?jī)?nèi)容，還需要一些額外的代碼來(lái)適應(yīng)那些老舊的瀏覽器。 

不同的情況需要不同的浮動(dòng)清除方法。以一個(gè)具有不同樣式塊的網(wǎng)格為例。