清除浮动

• 利用overflow:hidden,zoom:1强制外围块扩大到包含浮动元素

.clearfix{
    overflow:auto;
}

上述代码可以在现代浏览器上工作，但是不支持IE6,如果需要支持IE6,就需要加入zoom:1

.clearfix{
    overflow:auto;
    zoom:1;
}

• 若在两列或三列布局中，中间有一列的高度比较短，则后面的内容就会上移,需要在在外围div的底部添加一个清除元素，这个属性可以防止元素包围浮动元素，如下

clear:both;

• 在非浮动元素标签如div中浮动一个或多个元素时，可能会导致一个问题，如果浮动元素高于div里面的其他内容，它就会从外围元素的底部凸出来

解决办法：浮动外围元素，浮动的容器div会扩大，直到完全包含它里面的浮动元素，必须在浮动容器后的任何元素中添加一个clear属性

• 使用”简单清除法”

.clear:after{
    content:"";
    display:block;
    height:0;
    font-size:0;
    clear:both;
    visibility:hidden;
}
.clear{
    zoom:1 //for ie6
}

注意：当空间不能够容下时，就会出现浮动下落，因此要将盒模型牢记，浏览器窗口显示的元素宽度不等于width的值，任何一个元素显示的宽度都是它的宽度,left/right border,left/right padding,以及left/right margin值得总和，若空间不足以容纳下，则会出现浮动下落

参考:
1. http://zh.learnlayout.com/clearfix.html
2. http://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use