CSS 清除浮动 clearfix hack

平常做东西，经常要碰到清除浮动（对于一些浮动元素）一般最简单的方式是在要清除浮动的元素后直接加个 <div>

在使用浮动的时候经常会遇到一个古怪的事情：

img {
  float: right;
}

<div>

呃....这个图片比包含它的元素还高，而且它是浮动的，于是它就溢出到了 div 容器外面！

见证奇迹的时刻到了！有一种比较丑陋的方法可以解决这个问题，它叫做清除浮动 - clearfix hack。

让我们加入一些新的 CSS 样式：

img {
  float: right;
}

.clearfix {
  overflow: auto;
}

<div>

似乎好多了~

这个可以在现代浏览器上工作。如果你想要支持 IE6，你就需要再加入如下样式：

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

有些独特的浏览器，可能需要“额外的关照”。清除浮动这潭水很深很深，但是好在这个简单的解决方案，已经可以在今天所有的主要浏览器上工作。