关于position的relative和absolute。还有那个怪异的float的作用。

（一）定位

relative是相对于自己来定位的，relative 不脱离文档流。

例如：.some {position:relative;top:-50px;}，

1）.some会在相对于它原来的位置上移50px。

2）他原来的位置会保留着，也就是有了一块空白区域。（因为它不脱离文档流）

absolute是相对于自己最近的父元素来定位的，其默认的父元素就是body。

absolute脱离文档流，所以不会象relative一样留有空白。

更确切描述是：absolute是相对于最近的一个有relative定位的父元素进行绝对定位，如果没有，则以body为父进行绝对定位。

从应用的角度来说，relative常用于包含有absolute元素的容器元素上。

（二）浮动

对于float，其干的事情也是在做定位。

比如，实现文字环绕一个图片的效果。

一般的使用场景如：采用浮动方法实现页面左右分栏布局，或者是列表排列。

但是这些也可以用其他一些CSS属性（不考虑table）代替实现。

【浮动就是个带有方位的display:inline-block属性】

只不过display:inline-block只能水平从左向右，float可以多个方向。

看下面的英文解释：

Floated elements remain a part of the flow of the web page. This is distinctly different than page elements that use absolute positioning，

Absolutely positioned page elements are removed from the flow of the webpage

Float 元素本身就是 Positioning(定位)元素， 他和 Absolute 定位的唯一区别就是：

Float 元素【保留】了它在文档流中本身的位置，

Absolute 元素【移除】了它在文档流中本身的位置。