clearfix 密技

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

img {
  float: right;
}

<div>

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

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

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

.clearfix {
  overflow: auto;
}

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

<div class="clearfix">

好多了！

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

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

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