布局模型是建立在盒模型基础之上。
CSS包含三种基本布局模型
1. 流动模型（Flow）
2. 浮动模型（Float）
3. 层模型（Layer）
流动模型（Flow）
首先流动模型是默认的网页布局模型.
块状元素都会在所处的包含元素内自上而下按顺序垂直分布，在默认的情况下，块状元素的宽度为100%，所以都是占据一行的。
内联元素都会在所处的包含元素内从左到右水平分布显示
浮动模型（Float）
使用浮动模型可以使达到并排的效果。
任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。
div{
width:200px;
height:200px;
border:2px red solid;
float:left; //靠左边一行显示
}效果如下：
还可以float:right，如果需要两个元素一左一右的话，则分别设置 left与right
层模型（Layer）
让html元素在网页中精确定位，css定义了一组定位属性来支持层布局模型。
1. 绝对定位（position：absolute）
2. 相对定位（position：relative）
3. 固定定位（position：fixed）
绝对定位
需要设置position:absolute来表示绝对定位，在配合left，right，top，bottom来定位，他需要父类块进行参考，如果不存在这个，就相对于body元素，即浏览器窗口
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
效果如下：
层模型--------相对定位
想为元素设置层模型中的相对定位，需要设置position:relative,他是通过left，right.....来确定元素在正常文档中的偏移位置，相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
层模型--------固定定位
fixed表示固定定位，他可以一直固定在浏览器的某个地方（无视浏览器大小的变化，哪怕向下滚动他还是固定在那里）帮助理解：比如说网页中的广告一直固定在右下角
右下角广告固定：如下
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
position:fixed;
bottom:0;
right:0;
}
Relative和Absolute组合使用
要满足以下条件：
1. 参照定位的元素必须是相对定位元素的前辈元素（父类元素）
2. 参照定位的元素必须加入position:relative
3. 定位元素加入absolute配合top等等
