日常切图布局中经常要用到浮动，但是，只会用却不知道浮动的原理，清除浮动的作用。
今天就讲解一下浮动的基本作用与原理，清除浮动的那些方法，日常开发通常用什么清除浮动。
一、什么是浮动？
使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
二、什么是文档流？
文档流是文档中可显示对象在排列时所占用的位置，默认从上到下，从左到右排序。
三、为什么要使用浮动？
布局中要两个div并排显示，在不改变div元素属性的情况下，使用浮动使最方便的实现方法。
float:left | right | none | inherit;
四、浮动的作用
1、块在一排显示
2、使内联支持宽高
3、默认内容撑开宽度
4、脱离文档流
5、提升层级半层
五、清除浮动的方法
1.加高 问题：扩展性不好
2.父级浮动 问题：页面中所有元素都加浮动，margin左右自动失效（floats bad ！）
3.inline-block 清浮动方法： 问题：margin左右自动失效；
4.空标签清浮动 问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差）
5.br清浮动 问题：不符合工作中：结构、样式、行为，三者分离的要求。
6.after伪类 清浮动方法（现在主流方法） .clear:after{content:‘‘;display:block;clear:both;} .clear{zoom:1;} after伪类： 元素内部末尾添加内容； :after{content"添加的内容";} IE6，7下不兼容 zoom 缩放 a、触发 IE下 haslayout，使元素根据自身内容计算宽高。 b、FF 不支持；
7.overflow:hidden 清浮动方法； 问题：需要配合 宽度 或者 zoom 兼容IE6 IE7； overflow: scroll | auto | hidden； overflow:hidden;溢出隐藏（裁刀！）
最常用after伪类清除浮动。
css 浮动float
原文地址：http://www.cnblogs.com/Argentina/p/7787342.html