CSS布局模型

CSS的布局模型分为3种，分别是流动模型（Flow）、浮动模型（Float）和层模型（Layer）。

流动模型

流动模型（Flow）是默认的布局模型，在不进行指定的情况下，浏览器都是以流动布局模型来处理HTML内容。
流动模型中的块元素（Block）都是按照在父元素内的自上而下的垂直顺序分布。流动模型中的块元素的宽度在不进行指定时，是与它的父元素等宽的。
流动模型中的内联元素（Inline）都是按照在父元素内的自左向右的顺序分布。

浮动模型

浮动模型（Float）类似于将浏览器变为画板，将元素可以放在画板的任意位置而不是只能存在于特定位置不能移动。
在浮动模型中，两个块元素（Block）可以处在同一行上，只要在样式表中加入一行简单的代码即可实现：

float:left/right;

层模型

层模型与Photoshop中的图层概念类似，不同的元素可以理解为不同的图层。在层模型中需要对元素进行定位，定位使用position来指定。

position:absolute/relative/fixed;absolute：绝对定位 relative：相对定位fixed：固定定位

进行绝对定位的元素，以包含它的父元素做为基准来进行定位，如果没有包含它的父元素，则以body元素为基准（整个的浏览器窗口就是最高层的父元素）。
确定好父元素后，就可以使用left、right、top和bottom来对元素进行定位了。
相对定位则是以该元素之前的位置为基准来进行定位，在重新定位之后，该元素之前所存在的区域仍然属于该元素所有，并未被释放，不能被其它元素所使用。
固定定位是对于浏览器窗口本身而言的，固定定位的元素始终处于浏览器窗口的某个位置，不随文档流的移动而移动，具体的例子可见百度贴吧中的右侧导航条。

注意

如果要将某个元素A基于另一个元素B来进行定位，必须满足以下条件：
1、B是A的父元素；
2、B元素的样式中需要有”position:relative”；
3、A元素的样式中需要标明”position:absolute”，然后再用top\left\right\bottom来进行详细的定位。