大多数官方的对float的定义和用法是这样写的：
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
道理我都懂，可还是不会用啊（我笨）！！
参考了很多很多关于float的理解，终于理解了一点，参考了http://www.cnblogs.com/chaixiaozhi/p/8481778.html的说法，说说自己的理解；
首先，最基本的，被设置了float的元素会脱离文档流。
听着很简单，但是实际运用时会遇到很多奇怪的现象，比如：
| HTML代码 | CSS代码 | 原效果 | 浮动后效果 |
| <body> |
.first{ |
 |
|
上图看到一个很明显的浮动效果，第二个div出现在页面左上角，而第一个则浮动在浏览器页面之上，就像新建了一个图层；
但是这里有一个问题，为什么第二个div里面的文字没有被盖住呢？
不知道大家有没有接触过DOM树
初次接触“脱离文档流”的朋友可以这样理解：
body是父亲，下面的两个div是兄弟，本来兄弟两个关系很好，一个一个排好队被body包含，但是有一天，第一个div被设置了float，老天爷（浏览器）规定，任何float元素都不允许再呆在自己的家族中，于是第一个div被逐出家门，断绝和body父子关系，于是两者之间不再包含；同时第二个div由于和第一个div是兄弟，平辈嘛，也无视了浮动的第一个div，占据了它的位置，但是第二个div的儿子，也就是文字“第二个”（文本或者其他元素）是晚辈嘛，就得让着第一个div了，不能占据它的位置；
于是第二个div里面的文字没有被盖住了(๑＞ڡ＜)✿