分成: static(默认), float, relative, absolute 等. static(默认布局)：

一个div就占一行. 各种元素以出现在HTML中的顺序为准.

结果大概是：

float(浮动定位)：

可以让某个块元素向左对齐排序,或者向右对齐排序

结果大概是：

relative(相对定位)：

出现在与它 父类元素的 相对位置. 例如:

结果大概是：

absolute 绝对定位

它的参照父类元素是最上一个 "absolute, 或者 relative" 的元素,而不是最近父类的元素.

出现的位置是标注的top,left位置上. 例如, 下面有三个 div, 最内侧的 div是absolute ,第二个div是普通的static 定位, 所以, 第三个div就会以最外层的div做参照

结果大概是(注意: 第三个 div出现在了第二个div之外)

static 与float的混合：

absolute 不会影响到其他块元素

relative 会占用static布局的位置

static 与 float 默认不在一个定位中,不会互相影响. 但是clear:left/right/both下面的static布局, 就会在高度上收到影响,认为clear前面的float是占用了高度的.(具体看例子)

如果 我们加上一个 static position(默认的DIV)之后, 看起来就是:

结果大概是：

这个静态的div 被放置在了float 定位的div的 下面.

之所以看起来比较复杂,是因为 在浏览器处理时,把static放在了一个页面空间中,把float的部分, 放在了另外的空间中. 使用clear之后, 接下来的static内容就会识别前面的float空间

参考：http://js_book.siwei.me/web_front_end/css.html