clear:both

<div style="border:2px solid red;"> 
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> 
<div style="clear:both;"></div> 
</div>  

效果：

没有clear:both效果：

这样看，应该就一目了然了：原来后边的Clear:both;其实就是利用清除浮动来把外层的div撑开，所以有时候，我们在将内部div都设置成浮动之后，就会发现，外层div的背景没有显示，原因就是外层的div没有撑开，太小，所以能看到的背景仅限于一条线。最好的方法是用clearfix。

.clearfix:after{content: "";display: block;clear: both;}
.clearfix{zoom:1;}