用div+css构架网页结构的时候，float的使用频率非常高，用了float，你就得想着怎么clear掉它，不然页面就歪给你看。
以前做网页，就干脆多加一个元素，给一个clear:both;的属性来clear.
<div id="wrapper" style="width:200px;background:#000;">
<div id="left" style="width:50px;float:left;background:#333;">浮动到左边<br />宽度50px</div>
<div id="right" style="width:150px;float:left;background:#666;">浮动到左边<br />宽度150px</div>
<div style="clear:both;"></div>
</div>这样虽然起到了效果，不过毕竟多了好多无关元素，结构看起来很乱。今天特别去网上搜索了下前辈们总结出来的方法，如下:
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */这样你只要给#wrapper加一个clearfix的className就可以了。