CSS高度塌陷问题-清除浮动

对于一个元素来说，如果他设置了浮动，则就会转化为块元素类型，可以设置width，height等。但是浮动会使元素脱离正常文档流，如果浮动元素的高度大于父元素的高度，则会使得浮动元素脱离父元素，也就是我们常说的高度塌陷。

在CSS中，常见的清除浮动有三种方法：

（1）clear：both

这种方法应用于浮动元素后面的元素，常常配合一个div元素来使用，这种方法会导致有一些没有任何语义的标签大量出现

（2）overflow：hidden

这种方法应用于浮动元素的父元素中，而不是当前浮动元素，虽然这种方法不会产生没有语义的标签，但是overflow：hidden则可能会隐藏子元素中多出的部分，一旦父元素设置的大小不足以容纳我们的子元素，这颗隐藏的炸弹就会爆炸

（3）：：after

这是我们实际开发中最常用到的解决方案

语法：

.clearfix{*zoom:1;}/*用于解决IE6，IE7浮动问题*/
.clearfix::after{
clear:both;
content:"";       /*这里可以填写任意的内容，使用这个属性只是因为：：after伪元素需要配合这个属性才能发挥作用*/
display:block;
height:0;         /*这里写成line-height也是可以的*/
visibility:hidden;    /*可见度为隐藏，仍然占据空间，与display：none有区别*/
}

　　说明：对于这个方法，我们常常会定义为公共类，然后在浮动元素的父元素中引用