修正 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

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.
本篇發表於 News-Technology。將永久鏈結加入書籤。

修正 CSS 對於 float 區塊, 使用 clear:both 無效的解法 有 7 則回應

  1. ㄚ琪 說道:

    我用了這個屬性,解決了工作達人上sociable及multi-page-toolkit兩個外掛的css造成的疊字!

  2. Tsung 說道:

    嗯嗯, 這個發生狀況我也不確定, 不過多寫那些是為了應付一些其它瀏覽器用的~ 🙂

  3. 小斌 說道:

    感謝您這篇,讓我解決了浮動之後的問題。:D

  4. Tsung 說道:

    很高興對您有幫助~ 🙂

  5. shawn 說道:

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

  6. jonlin 說道:

    一直沒辦法解決的區塊問題
    使用你的方法就迎刃而解了
    感謝分享!!!!!

  7. Magento小工 說道:

    css 中的float太复杂了, 现在还没找出规律来。

發表迴響