最常用的四种清除浮动方法

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

常用的4种清除浮动方法：

1. 在最后一个浮动标签后新加一个标签，设置为clear：both；（不建议使用）

.clear{
 clear：both；
 }

如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。

缺点 ：添加无意义标签，语义化差。

2. 给父元素添加overflow:hidden;（不建议使用）

.content{
        width:100px;
        border:1px dotted red;
        overflow:hidden;
}

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

3. 使用after伪元素清除浮动（建议使用）
   但是借助:after微元素设置样式，不需要在HTML代码上额外增加元素。

 .clearfix:after{
         content:".";
         display:block;
         height:0;
         visibility:hidden;
         clear:both;
     }
     .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *只有IE6-IE7执行，其他浏览器不执行*/
    }

缺点 ：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

4. 使用before和after双伪元素清除浮动（建议使用）

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

缺点：用zoom:1触发hasLayout.