1.清除浮动
下面是两种常用的方式，而这两招也够用了(不用千招会，只需一招精)。
1.结尾处加空div标签 clear:both
<style type="text/css">
.left{float:left;}
.right{float:right;}
/*清除浮动代码*/
.clearfloat{clear:both}
</style>
<div>
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
缺点：每次清除浮动都加空div，影响了HTML的结构，例如如果要算div的个数，都会被影响到。
2.父级div定义 伪类:after
<style type="text/css">
.left{float:left;}
.right{float:right;}
.clearfloat:after{
content:"\200B";/*unicode字符里零宽度空格*/
display:block;
height:0;
clear:both;
}
</style>
<div class="clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
我更倾向使用这种清除浮动的方式，不增加HTML，浏览器兼容性也好，写法在我看来也简洁。
PS:不过如果要兼容IE6、IE7，就需要加多个zoom:1。