在CSS中，父元素中的子元素如果使用了float，会导致父元素塌陷，高度为0。
对于这种情况，常见的解决方式有两种。
一、增加新的div，应用clear:both属性
html:
1 <div class="father"> 2 <div class="div1">1</div> 3 <div class="div2">2</div> 4 <div class="div3">3</div> 5 <div class="clear"></div> 6 </div>
css:
1 .clear { 2 clear:both; 3 height:0; 4 }
二、利用:after来清除浮动
原理：这种方法的原理是利用伪类:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其原理类似第一种方式，但区别在于这种方式是利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。
首先需要给父元素添加一个.clear类
css如下
.clear:before, .clear:after { content: ‘‘; display: block; } .clear:after { clear: both; } .clear { *zoom: 1; //兼容IE6、IE7 }
原文：http://www.cnblogs.com/tgxh/p/6135615.html