浮动原理及清浮动

浮动: left/right/none

元素加了浮动，会脱离文档流(文档流是文档中可显示对象在排列时所占用的位置) ，按照指定的一个方向移动直到碰到父级的边界或者另外一个浮动元素停止

1.使块元素在一行显示； 
2.使内嵌支持宽高； 
3.不设置宽度的时候宽度由内容撑开； 
4.脱离文档流 ；
5.提升层级半层。

清浮动的方法  
1.加高  
问题：扩展性不好

2.父级浮动  
问题：页面中所有元素都加浮动，margin左右自动失效

3.inline-block 清浮动方法：  
问题：margin左右自动失效；

4.空标签清浮动  
问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差）

5.br清浮动  
问题：不符合工作中：结构、样式、行为，三者分离的要求（不符合w3c标准）。

6.after伪类 清浮动方法（现在主流方法）

.clear:after{content:‘‘;display:block;clear:both;}
.clear{zoom:1;}

after伪类： 元素内部末尾添加内容；:after{content"添加的内容";} IE6，7下不兼容  
zoom缩放   触发IE下 haslayout，使元素根据自身内容计算宽高。

7.overflow清浮动方法；

.overflow-clear-float {overflow:hidden;}
.overflow-clear-float {overflow:auto;}

问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；  
overflow:  scroll | auto | hidden；overflow:hidden;溢出隐藏

更多详细的关于清浮动方法点击下面的链接查看：

清理浮动的几种方法以及对应规范说明