解决由float引起的“高度塌陷”问题

“高度塌陷”是指父元素未设置高度和宽度，而且其只包含浮动的子元素时，该父元素的高度会产生“塌陷”.换言之，当元素不具有实际高度时，就会产生“高度塌陷”。

解决“高度塌陷”问题的方法有如下几个：

1.在父元素结束前加一个高度为0，宽度为0，且clear:both的div。当然如果有未浮动的子元素，可以直接clear:both。

<div>
   <div class="left">块1</div>
   <div class="left">块2</div>
   <div class="left">块3</div>
   <div class="clear"></div>
</div>

.left{float:left;/*举例，其他样式在此不设置*/}
.clear{clear:both;height:0;width:0;}

说明：如果实际项目中父元素含有未浮动的子元素时，可以给未浮动的子元素加clear:both，就不需要在设置一个高度和宽度为0的div

2.为父元素添加overflow:hidden属性，兼容ie6时需要再添加zoom:1

<div class="father">
    <div class="left">块1</div>
    <div class="left">块2</div>
    <div class="left">块3</div>
</div>

.father{
    overflow:hidden;
    zoom:1;/*兼容IE6*/
}
.left{float:left;}

3.使用after伪对象清除浮动，但这个只适用于非IE浏览器。

<div class="father">
    <div class="left">块1</div>
    <div class="left">块2</div>
</div>

.father{zoom:1;/*兼容IE6*/}
.father:after{display:block;clear:both;content:"";visibility:hidden;height:0;}
.left{float:left;}