三种常用的清除浮动的方法

 方法一：添加新的元素 、应用 clear：both；

 

    
    .clear {
        /* clear: both;*/
    }
    
    .overflow {
        /*overflow: auto;
        zoom: 1;*/
        /*zoom: 1; 是在处理兼容性问题*/
    }
    
    .outer {
        zoom: 1;
    }
    /*==for IE6/7 */
    
    .outer:after{
    	clear:both;
    	content:'.';
    	display:block;
    	width:0;
    	height: 0;
    	visibility:hidden;
    	/*其中clear:both;指清除所有浮动；content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动*/
    }

<div class="clear"></div>

  方法二：父级div定义 overflow: auto     原理：使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值，如果使用这个值将无法达到清除浮动效果，其他两个值都可以。

方法三：最高大上:after 方法：作用于浮动元素的父亲;;原理：这种方法清除浮动是现在网上最拉风的一种清除浮动，他就是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果