clearfix 密技

在使用 float 的時候經常會遇到一個奇怪且糟糕的事:

img {
  float: right;
}
<div> An Image

喔,不 ...... 這個圖片比包含它的元素還高,而且它是浮動的,於是它就溢出到了容器外面!

是的,有個方法可以解決這個問題,不過這方式還蠻髒的,它叫做 clearfix 密技(hack).

讓我們加入一些新的 CSS 樣式:

.clearfix {
  overflow: auto;
}

我們現在來看看發生了什麼事:

<div class="clearfix"> An Image

好多了!

這個密技可以用在現代的瀏覽器上,但如果你還想支持 IE6,你就必須加入如下樣式:

.clearfix {
  overflow: auto;
  zoom: 1;
}

某些特別的瀏覽器可能需要注意,clearfixing 的世界是很可怕的,但這個簡單的密技可以套用在這些主流瀏覽器上。

  • Creative Commons License