如何清除浮动

1、添加额外标签（不推荐）

在浮动元素下面加一个块div给div添加属性clear:both可以清除这个div上面的所有浮动

如果添加属性clear:left可以清除这个div上面的左浮

如果添加属性clear:right可以清除这个div上面的右浮

添加无意义标签，语义化差

<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
<div style="clear:both;"></div>
</div>
<div class="footer">.footer</div>

2、父元素设置 overflow：hidden（不推荐）

给浮动的外层父元素添加overflow:hidden属性，触发BFC

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

<div class="wrap" id="float3" style="overflow:hidden; *zoom:1;">
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>

3、 使用:after 伪元素

由于clear:both只对块级元素有效果，所以首先display: block把伪元素改成块级元素，再添加clear:both清除浮动

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

    .clearfix:after{/* -正常浏览器清除浮动方法*/
        content: "";
        display: block;  /*伪元素是行内元素首先改成块级display: block*/
        height: 0;
        clear:both;      /*清除浮动*/
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，-其他浏览器不执行*/
    }
 

    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>

4、使用before和after双伪元素清除浮动

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