清除浮动方法

1.父亲高度法（不推荐）

给父盒子设置一个高度，这种方法不能进行页面的自适应

2.额外标签法（不推荐）

 给谁清除浮动，就在其后额外添加一个空白标签 。

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

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

.clear{
        clear:both;
    }

3.overflow方法

给父元素添加Overflow:hidden, 可以通过触发BFC的方式，实现清除浮动效果。必须给父级定义width或zoom:1

优点： 简单、代码少、浏览器支持好  

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。

<div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
</div>
.fahter{
    width: 400px;
    border: 1px solid deeppink;
    overflow: hidden;
}

4.单伪元素法

在父级元素上加一个after伪元素，content、display、height、clear：both，需要考虑兼容性问题

优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）  

缺点： 由于IE6-7不支持：after，使用zoom：1

<div class="father clearfix">
      <div class="big">big</div>
      <div class="small">small</div>
 </div>
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        clear:both;
 }
.clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
 }

5.双伪元素法

在父级元素上加before、after伪元素，content、display，after中添加clear：both，需要考虑兼容性问题

<div class="father clearfix">
      <div class="big">big</div>
      <div class="small">small</div>
 </div>


.clearfix:before, .clearfix:after {
        content: ""; 
        display: block;
    }
.clearfix:after {
        clear: both;
    }
.clearfix {
        *zoom: 1;兼容性处理方法
    }