Tsung's Blog | 修正 CSS 對於 float 區塊, 使用 clear:both 無效的解法

星期一, 元月 14, 2008

修正 CSS 對於 float 區塊, 使用 clear:both 無效的解法

CSS 的 float 使用起來蠻方便的, 但是使用完後, 那塊空間就等於是消失, 所以需在下面加 clear:left / clear:right / clear:both (我通常都直接 clear:both 就是了~), 但是有時後會遇到寫 clear:both, 但是沒有任何作用的狀況.

這篇文章也是早就想寫, 正好看到修正因為 float 導致區塊無法撐開的問題這篇, 該說明的都說很齊全, 所以直接來寫寫結論就好了~~ :P

我現在 CSS 都會規畫一個 "/* common */" 的區塊, 那邊就會定義一些共用的 class, 和 clear 相關的就是下述:

.clear {zoom:1; clear:both;}
.clear:after {content:''; display:block; clear:both; visibility:hidden; height:0;}

主要就是這兩段, 遇到 float 完後, 要清除的地方, 寫個 <p class="clear"></p> 就可以了~ :P

不過, 上述的第一段 ".clear {}" 這段, 有些人是不用加的, 或者只有寫 ".clear{zoom:1;}" 而已, 但是我使用起來就是有些問題, 所以還是把 "clear:both;" 都加上去.(跟下述的寫法有些不同的地方, 我現在也解釋不出來, 總之先都記著, 遇到或許就知道了.. XD)

想知道為何要寫那麼多東西, 請參照下述兩篇:

如何修正 DIV float 之後導致的外部容易不能撐開的問題
How To Clear Floats Without Structural Markup(Clearing a float container without source markup)

直接摘取他們的結論, 就是加 clearfix 的 class 即可, 跟我上面目前用的有點不同, 但是差異我現在還不清楚, 要再測試看看, 他們的寫法應該周全很多:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

其它相關網頁

作者 jon ( News-Technology ) :: 迴響 (4):: 靜態連結網址

相關標籤

this is comment icon clear:both [回覆]