摘抄于慕课网《HTML+CSS基础课程》
CSS包含3种基本的布局模型，分别是Flow、Layer和Float.
在网页中，元素有三种布局模型：流动模型（Flow）、浮动模型（Float）和层模型（Layer）
流动模型
流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。
典型特征：
1.
块状元素都处在所处的
包含元素内自上而下按顺序
垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%
2.在流动模型下，
内联元素都会在所处的包含元素内从左到右
水平分布显示。
浮动模型
通过CSS设置块状元素的
float属性，可以将多个块状元素显示在同一行。如
float:left;
层模型
通过CSS设置
position属性，来实现层布局模型。层模型有三种形式：
绝对定位（absolute）、
相对定位（relative）和
固定定位（fixed）。
一、绝对定位 position:absolute
将元素从文档流中拖出来，然后使用left、rigth、top、bottom属性相对于其
最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于
浏览器窗口。
二、相对定位 position:relative
通过left、rigth、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于
以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，
偏移前的位置保留不动。
三、固定定位 position:fixed
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是
视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，
因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
Relative与Absolute组合使用
1、参照定位的元素必须是相对定位元素的前辈元素
2、参照定位的元素必须加入position:relative;
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了