布局模型：
1.流动模型flow()--默认的网页布局形式
块状元素自上而下的垂直排列；而内联元素则会在所在行从左到右进行排列
2.浮动模型
任何元素默认是不能浮动的，可用css设置float 如 div、p、table、img 等元素都可以被定义为浮动
（1）可实现两个div并排显示
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
（2）同理，可实现两个div 一左一右一行显示
div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
3.层模型
(1)绝对定位：（设置position:absolute;）
使用left,right,top,bottom属性，相对于其最接近的一个具有定位属性的父包含块进行绝对定位，若没有则为相对于body进行定位
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
（2）相对定位（position:relative;）
相对于以前的位置浮动起来进行移动，而偏移前的位置保持不变。
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
（3）固定定位（position:fixed;）
相对于视图固定不变，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小。
relative 与 absolute 混合使用：
规范：
作为参照的元素（设置position:relative;）必须为
进行相对定位元素
（position:absolute;
left:;top:;）的前辈。
参照定位的元素必须加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
#box2{
position:absolute;
top:20px;
left:30px;
}