1.三种布局模型：
流动模型Flow
浮动模型Float
层模型Layer
2.流动模型：
默认布局模式。
特点：
块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，默认块状元素的宽度都为100%，以行的形式占据位置。
内联元素都会在所处的包含元素内从左到右水平分布显示，如a、span、em、strong。
3.浮动模型：
让块状元素并排显示的方式。
float: left、right
xxx{float:left;}
4.层模型：
让元素在网页中精确定位的方式。
>三种形式：
绝对定位(absolute)、相对定位(relative)、固定定位(fixed)
1>绝对定位：
position: absolute
使元素脱离文档流，然后使用left、righ、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
2>相对定位：
position: relative
通过lef等属性确定元素在正常文档流中的偏移位置。左上角为坐标原点。
元素偏移，但是偏移前的位置保留不动，覆盖不了前面的div没有偏移前的位置。
3>固定定位：
position: fixed
和absolute类似，但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。
由于视图本身是固定的，不会随浏览器窗口的滚动条滚动而变化。
除非屏幕中移动浏览器窗口的屏幕位置，或者改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。
>relative和absolute组合使用：父元素是relative/absolute，定位元素使用absolute。