清除浮动的四种方式

清除浮动最常用的四方法

一、 额外标签法

给谁清除浮动，就在其后额外添加一个空白标签
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>