[css] float 屬性,什麼是 clearfix?

有寫過 CSS 的應該都知道有一個屬性為 float,例如我們常常使用 float 去做一些導覽列的應用:

例:

當然也可以使用 display: inline-block,達到類似的效果。

不過在以上這個例子,如果你仔細看了一下 HTML 與 CSS的程式碼,你應該可以發現

原本應該是 div > ul > li 的結構,而且 div 應該要有 #CCC地的背景顏色,但卻似乎沒出現。

若你再仔細一點按下 F12檢查元素,會發現 div 的高度竟然是 0 ?

這其實也就是元素並不會計算到有 float 屬性的元素高度,因此可能導致高度的值有誤

在目前新的瀏覽器中,我們可以在底下增加元素並賦予 clear: both 這個屬性來解決這個問題。(稱為 clearfix)

或是在 div 增加 overflow: auto; 的屬性:

我個人覺得更好的解法是利用 css 的擬元素

Leave a Reply