aresli.com

在很久很久以前，清除浮动这个问题一直困扰着我。直到我写出这样一行代码。

.auto_height { 
  height:auto !important; 
  height:100%; 
  min-height:0px; 
  overflow:hidden; 
  _overflow:inherit;
}

这行代码兼容ie6,ie7,firefox2,firefox3。那个年代还没有chrome，还没有css3。我还在用着我的iphone1。那是一个兼容ie6是理所当然的年代。

直到有一天，我遇到了drupal6，发现自己的代码虽然管用，但看上去总是那么的土鳖。那个时候clearfix还不叫clearfix，叫clear-block

/*
** Markup free clearing
** Details: http://www.positioniseverything.net/easyclearing.html
*/
.clear-block:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clear-block {
  display: inline-block;
}

/* Hides from IE-mac \*/
* html .clear-block {
  height: 1%;
}
.clear-block {
  display: block;
}
/* End hide from IE-mac */

看看人家的注释多么的高端洋气！

又过了一段时间，网上突然兴起的一阵研究解释清除浮动的风潮，各种各样的版本层出不穷。google reader里充斥着这样的标题：《*个清除浮动的最佳方案》《最实用的*段清除浮动代码》,那段时间我又遇到了drupal7。clearfix终于叫clearfix了，代码也升级了。

/**
 * Markup free clearing.
 *
 * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
 */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* IE6 */
* html .clearfix {
  height: 1%;
}
/* IE7 */
*:first-child + html .clearfix {
  min-height: 1%;
}

后来很长一段时间里，我都是在用这段clearfix，时间长到我已经记不清这段代码里有哪几个属性了。直到我遇到了sass+compass。她们两个告诉你，你根本不需要记住有哪些属性，只需要记住一个你再熟悉不过的单词，“clearfix”

@import compass

#demo
  +clearfix

她编译出来的css就会是：

#demo { overflow: hidden; *zoom: 1; }

原来clearfix的代码又升级了。越来越简单粗暴了。
有的时候我们不需要overflow: hidden;，那么可以用下面这段代码代替：

#demo { overflow:auto; _height:1% }