clearfix

1.  
.clearfix:after {  
    clear: both;  
    content: " ";  
    display: block;  
    height: 0;  
    visibility: hidden;  
}  
  
.clearfix {  
    zoom:1  
}  
  
.clear {  
    clear: both;  
    height: 0;  
    overflow: hidden;  
}  
2.  复杂而不常用 或者过时了的 
  
.clearfix:after {  
    content: ".";  
    display: block;  
    clear: both;  
    visibility: hidden;  
    line-height: 0;  
    height: 0;  
}  
   
.clearfix {  
    display: inline-block;  
}  
   
html[xmlns] .clearfix {  
    display: block;  
}  
   
* html .clearfix {  
    height: 1%;  
}  
  
3.  
.clearfix {  
  zoom: 1;  
  display: table;  
  width: 100%;  
} 

4.
.line:before,.line:after{content:"";display:table;}
.line:after{clear:both;}
.line{*zoom:1;}
.unit{float:left;}
.lastUnit{float:none;display:block;display:table-cell;width:9999em;*width:auto;*zoom:1;_position:relative;_left:-3px;_margin-right:-3px;}
5

.main{display:table-cell;*display:block;width:auto;}
.body,.main{*zoom:1;}
.body:after,.main:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}

.leftCol{float:left;width:250px;_margin-right:-3px;}
.rightCol{float:right;width:300px;_margin-left:-3px;}