css三种布局模型：
Flow:流动型
Float：浮动型
Layer：层模型
流动模型特点：
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
浮动模型：可以使两个块元素在一行
float:left
层模型
绝对定位：position:absolute
将元素从文档流中拖出来，相对于浏览器设置定位
相对定位：position:relative
固定定位：position:fixed
视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化
固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
<div id=“box1”><!－－参照定位的元素－－>
<div id=“box2”><－－相对参照元素进行定位－－>
</div><－－相对定位元素－－>
</div>
＃box1{
width:200px;
height:200px;
position:relation;
}
#box2{
position:absolute;
top:20px;
left:30px;
}