1.对父元素使用overflow:hidden;zoom:1，或者是overflow:auto;zoom:1。
兼容性问题：该处使用zoom:1是为了兼容ie6，但是实际上，用height:1%;代替zoom:1;更好，因为它可以通过W3C。
该方法缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
2.在浮动元素后面添加新的元素，再使用clear:both。缺点：无意义的空标签，不利于语义化。
3.给浮动元素的父元素使用:after伪元素。如下：
.outer{zoom:1;}
.outer:after{
clear:both;
display:block;
content:".";
0;
height:0;
visibility:hidden;
}
其中content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。
同时，由于IE6-7不支持:after，使用 zoom:1 触发 hasLayout。
关于zoom:1
zoom:1;属性是IE浏览器的专有属性，Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。
但很遗憾的是，它通不过W3C验证．