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)
想知道為何要寫那麼多東西, 請參照下述兩篇:
- 如何修正 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 */
其它相關網頁