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

 方法一：添加新的元素 、应用 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的效果