关于清除浮动的五种方法

清除浮动的本质：为了解决父级元素印子级浮动引起内部高度为0的问题。

方式1:额外标签法（w3c推荐的方法）： 在最后一个浮动标签后，新添加一个标签

优点：通俗易懂，书写方便。
缺点：不推荐使用，添加许多无意义的标签，结构化较差。

.clear{
　　　clear:both;
　　　width:0;
　　　height:0;
}

方式2:父级添加overflow属性方法

.father{
    　　　overflow:hidden;
  }

优点：代码简捷。
缺点：内容增多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

方法3:为父元素添加after伪元素清除浮动

.clearfix:after{

　　　　　　content:"";//设置内容为空

　　　　　　height:0;//高度为0

　　　　　　display:block;//将文本转为块级元素

　　　　　　visibility:hidden;//将元素隐藏

　　　　　　clear:both//清除浮动

　　　　　}

.clearfix{

　　　　　*zoom:1;//zoom:1 就是IE6清除浮动的方式，* ie7以下的版本所识别

　　　　}

优点：符合闭合浮动思想，结构语义化正确。
缺点：由于IE6-7不支持：after，使用zoom：1触发hasLayout。

方法4:为父元素添加before和after双伪元素清除浮动

　.clearfix:before,.clearfix:after {
	          content: ""; 
              display: table;
        }
  .clearfix:after {
              clear: both;
        }
 .clearfix {
              *zoom: 1;
        }

优点：代码更简洁
缺点：由于IE6-7不支持：after，使用zoom：1触发hasLayout。

方法5:为父元素设置具体的宽和高的值

 .father{
	    　　　height:100px;//计算具体的值
	    　　　width:100%;
	  }

优点：通俗易懂，书写方便。
缺点：不推荐使用，需要计算准确地值，且容易出现偏差。