清除浮动常用的四种方法及优缺点

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

1.额外标签法：给谁清除浮动，就在其后额外添加一个空白标签 （不推荐使用）

优点：通俗易懂，书写方便。

缺点：*添加许多无意义的标签，结构化比较差。

2.父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。但是必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

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

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

.fahter{
     
        width: 400px;
        border: 1px solid deeppink;
        overflow: hidden;
    }

3.使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，，zoom(IE专有属性)可解决ie6,ie7浮动问题（推荐使用）

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

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

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

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

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

优点：简单、代码少、容易掌握

缺点： 只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

 <div class="fahter clearfix">
     <div class="big">big</div>
     <div class="small">small</div>
 </div>
 <div class="footer"></div>


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