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

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

? 空div方法從字面來看，是一個空的 div。

。有時可能會用

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

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

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

? .clearfix:after {

?     content: ".";

?     visibility: hidden;

?     display: block;

?     height: 0;

?     clear: both;

}

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

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