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

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

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

我現在 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> 就可以了~ 😛

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

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

直接摘取他們的結論, 就是加 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 */

其它相關網頁

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.

在〈修正 CSS 對於 float 區塊, 使用 clear:both 無效的解法〉中有 7 則留言

  1. 本來只使用 .clear { clear:both;}
    聽您教學加上 zoom:1 之後
    IE會出現不正常空白間距的問題就迎刃而解了!!
    謝謝您!!

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料