本文由黑壳网 www.bhusk.com原创
本文章来源CSS-布局篇 ~黑壳网

1 标准文档流（Normal flow）

块元素自动换行

元素设置的left,right,bottom,top属性都是没有效果的

z-index属性在这时也不会生效。(z-index 属性是设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。)

2 定位（positioning）

relative(相对定位) absolute(绝对定位) left top right bottom

relative 占据空间(原先的位置还存在 后面的元素不动) 相对于原先占有的位置上进行偏移

<div style="width:50px;height:50px;background-color:#00f;float:left">a</div>
<div style="width:60px;height:60px;background-color:#f00;position:relative;left:20px;float:left">b</div>
<div style="width:80px;height:80px;background-color:#0f0;float:left">c</div>

absolute 不占空间(后面的元素会填充) 并且会相对与包含它的最想近的已定位元素（没有就相对与body）

//所以b相对于body进行偏移，并且不占空间后面的元素填充

<div style="width:50px;height:50px;background-color:#00f;float:left">a</div>
<div style="width:60px;height:60px;background-color:#f00;position:absolute;left:20px;float:left">b</div>
<div style="width:80px;height:80px;background-color:#0f0;float:left">c</div>

3 浮动（float）

（1）当前块级元素a（float:left），下一个块级元素b，a会和b发生重叠，a在上面。

<div style="float:left;width:40px;height:40px;background-color:#f00">a</div>
<div style="width:80px;height:80px;background-color:#0f0">b</div>

（2）当前块级元素a（float:left），下一个块级元素b（float:left）。

<div style="float:left;width:40px;height:40px;background-color:#f00">a</div>
<div style="width:80px;height:80px;background-color:#0f0;float:left;">b</div>

（3）当前块级元素a（float:left），下一个块级元素b（float:left），下一个块级元素c（float:left）。

<div style="float:left;width:40px;height:40px;background-color:#f00">a</div>
<div style="width:80px;height:80px;background-color:#0f0;float:left;">b</div>
<div style="width:80px;height:100px;background-color:#00f;float:left;">c</div>

（4）当前块级元素a（float:left），下一个块级元素b（float:left），下一个块级元素c（clear:both）。

<div style="float:left;width:40px;height:40px;background-color:#f00">a</div>
<div style="width:80px;height:80px;background-color:#0f0;float:left;">b</div>
<div style="width:80px;height:100px;background-color:#00f;clear:both">c</div>

（5）当前块级元素a（float:left），下一个块级元素b（float:left），下一个块级元素c。

<div style="float:left;width:40px;height:40px;background-color:#f00">a</div>
<div style="width:80px;height:80px;background-color:#0f0;float:left;">b</div>
<div style="width:80px;height:100px;background-color:#00f;">c</div>