浮动的工作原理
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
浮动元素引起的问题：
1) 父元素的高度无法被撑开，影响与父元素同级的元素
2) 与浮动元素同级的非浮动元素会跟随其后
3) 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
清除浮动的几种方法：
1) 额外标签法。使用 CSS 中的 clear:both; 属性来清除元素的浮动可解决2、3问题。
注意：clear属性只适用于块级元素。
缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。
1 <div style="clear:both"></div>
2) 使用after伪元素清除浮动。对于问题1，添加如下样式，给父元素添加clearfix样式：
注意：该方法只适用于非IE浏览器。由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
1 .clearfix:after { 2 content: "."; 3 display: block; 4 height: 0; 5 clear: both; 6 visibility: hidden; 7 } 8 .clearfix { 9 display: inline-block; 10 } /* for IE/Mac */
关于该方法具体介绍请参考： http://www.cnblogs.com/GeekHacker/archive/2012/06/24/2560006.html
关于伪元素的基础介绍可参考：http://www.w3school.com.cn/css/css_pseudo_elements.asp
关于伪元素的深入理解请参考：http://blog.jobbole.com/49173/
3) 浮动外部元素。
4) 设置 overflow 为 hidden 或者 auto清除浮动。
说明：给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。