解读浮动闭合最佳方案：clearfix

方案一：

.clear{
　　clear:both;
　　height:0;
　　overflow:hidden;
}

该办法是在需要清除浮动的地方加个div.clear或者br.clear，这样能解决基本清浮动问题；

但是这种方法的最大缺陷就是改变了html结构，虽然只是加个div

 

方案二：

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
　line-height:0;

  clear: both;
  visibility: hidden
}

.clearfix {
  *+height: 1%;
}

用法很简单，在浮动元素的父云素上添加class=”..  clearfix”

改变css写法

.demo:after, .demo2:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden
}

.demo, .demo2 {
  *+height:1%;
}

以上写法就避免了改变html结构，直接用css解决了;

扩展：

*+height
IE7下识别这个高度,在其他浏览器,比如火狐,IE6、IE8等不识别这个高度

 

 

方案三：

.clearfix {
  overflow: auto;
  _height: 1%
}

扩展：

_height 在ie 6 中为 最小高度
min-height 在 ie7 中代表最小高度 
一般控制 div 自动调整高度使用i6/i7/ff
例如:
  _height:100px; /*控 ie6*/
  min-height:100px;/*控ie7*/
  height:auto;

 

方案四：

.clearfix {
  overflow: hidden;
  _zoom: 1;
}