清除浮动的四种方式

清除浮动最常用的四方法

一、 额外标签法

给谁清除浮动，就在其后额外添加一个空白标签
clear(类名可以随意），设置clear:both;即可

二、 父元素添加overflow方法

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

三、 使用after伪元素清除浮动

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

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

<style>
        .father{
            border: 1px solid black;
            *zoom: 1;
        }
        .clearfix:after,.clearfix:before{
               content: "";
               display: block;
               clear: both;
           }
           .big ,.small{
            width: 200px;
            height: 200px;
            float: left;
           }
           .big{
            background-color: red;
           }
           .small{
            background-color: blue;
           }
    </style>
   <div class="father clearfix">
    <div class="big">big</div>
    <div class="small">small</div>
  </div>
  <div class="footer"></div>