css布局

css有3种基本的定位机制：标准流，浮动，和定位
---------------------\\
1:相对定位
relative
对一个元素进行相对定位，即指通过垂直或水平位置，让这个元素相对于她的原始位置进行移动
1：
如果将top设置为20px,那么框将在原位置顶部下面20像素的地方
如果将left设置为30px
那么会啊元素左边创建30像素的空间，也就是像素会将元素向右移
#box{
position:relative;
left:30px;
top:20px;
}
注意
在使用相对定位时，无论是否进行移动，元素任然占据原来的空间，因此移动元素会导致它覆盖其他框
------------
2：
绝对定位
absolute
位置将依据浏览器左上角计算
绝对定位使文档脱离文档流，因此不占据空间
#box{
position:absolute;
left:30px;
top:20px;
}
解析：
绝对定位的元素的位置是相对于最近的已定位祖先元素而定的
2：
如果元素没有已定位的祖先元素
那么他的位置是相对于最初的包含块而定的
提示：
因为绝对定位的框与文档流无关，所以他们可以覆盖页面上的其他元素
可以通过设置z-index属性来控制这些框的堆放次序
z-index的值越高，越对显示在上层
-----------------
3：
float详解
4个属性
left，right
none默认的不浮动
inherit会从父级元素获取float
1：
用处
除了简单在图片周围包围文字外，float可用于创建全部网页布局
2：
清除浮动
clear是浮动的属性
设置了清除浮动float的元素不会产生float
而会忽视float向下移动
提示：
clear也有4个值
both清除左右
left，right只能清除一个方向
none默认值，只需要移除已指定的清除值时使用
3：
伟大的塌陷 
清除浮动的技术
例如
左浮动---左浮动--左浮动--左浮动--左浮动
左浮动---左浮动--左浮动--左浮动--左浮动
----
为了从视觉上较好的把相似的块联系起来
需要在颜色改变的地方开启新行
如果每个颜色组都有一个父元素
可以使用overflow或者简单清除方法
或者在每组之间用一个空的div