• 添加空白div
  以直接在高度塌陷的父元素的最后添加一个空白的div或任何块元素，由于这个div并没有浮动，所以它是可以撑开父元素的高度的，然后再对这个div清除浮动，通过这个空白的div撑起父元素的高度来解决高度塌陷，基本没有副作用。
  用法如下：

/*****样式*****/
.clear{
    clear: both;
}

<!-- 添加在最后的块元素 -->
<div class="clear"></div>

使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。

• 使用:after伪类
  过:after伪类向父元素的最后添加一个空白的块元素，然后对其清除浮动，这种方式和添加空白div的原理相同，有相同的效果，并且不会影响页面结构，几乎没有副作用，是我们最为推荐的方式。
  法如下：

/*********样式*********/
.clearfix:after{
    /*添加一个空白内容*/
    conten: "";
    /*转换为块元素*/
    display: block;
    /*清除两侧浮动*/
    clear: both;
}

<!-- 给高度塌陷的父元素的class属性添加值clearfix -->
<div class="someclass clearfix"></div>

• IE6的兼容
  IE6中不支持:after伪类，所以在IE6中还需使用hasLayout来处理。

.clearfix{
    zoom: 1;
}

如发现错误请联系我，谢谢你。
本文链接：http://ninefire.tk/HTML&CSS.basics/48.html