在这个系列第一章里可视化格式模型里就说到过，影响框的布局的几个因素：
1.框的尺寸和类型
2.定位体系
3.文档树中元素间的关系
4.外部信息
其中，我觉得在实际工作中处理最多的还要属定位体系的问题。定位体系，主要分三种，常规流（normal flow）、浮动（floats）、绝对定位（absolute positioning），这一节将大致的描述一下这三种定位体系，有一个大概的印象，知道到底是什么，然后后面的章节会一个一个具体的分析。
一、常规流
从直观上理解，常规流指的是html中的元素，按照它们在html中的位置顺序，决定它们排布的过程，自上而下，从左至右。同时，也因为是流，所以位置是可变的。常规其实是一个相对的概念，是相对脱离了常规流的float元素和absolute元素来说的。
在css2.1中，常规流包括块框（block boxes）的块格式化（block formatting）,行内框（inline boxes）的行内格式化（inline formatting），块框或行内框的相对定位，以及插入框的定位。
二、浮动
在浮动模型中，一个框首先根据常规流来布局，再将它从流中取出并尽可能地向左或向右偏移。内容可以沿浮动区的侧面排列。 因为它首先要根据常规布局后才偏移，所以效率较常规流低。
三、绝对定位
在绝对定位模型中，一个框完全的从常规流中脱离，对它后面的兄弟元素完全没有影响，并会根据它的包含块来定位。
绝对定位元素有一个很有意思的事情，如果你不设置absolute元素的top、left、right、bottom，它就会在它在常规流中本来的位置，但是感觉就像虚化了，不会占据任何空间，也不会影响后面的元素。根据这个性质可以做很多事情，会在后面的章节里详细的讲。
四、流（flow）
一个元素，如果它使float元素、absolute定位了，或者是根元素（html），那么它就被叫做流外的元素（out of flow）。如果一个元素不是流外的元素，那么它被称为流内的元素（in flow）。
元素A的流是一个集合，包含A元素本身，以及元素A的流内的子元素，且这些子元素最近的流外祖先是A元素。
<div class="A" style="position: absolute;">
<div class="B"></div>
<div class="C" style="position:absolute">
<div class="D"></div>
</div>
<div class="E">
<div class="F"></div>
</div>
以上的示例中，A元素的流如下：
1.A和C是流外的元素，所以C被排除；
2.D元素由于最近的流外祖先是C，所以也被排除；
3.所以最终A元素流内的元素是：A、B、E、F
五、选择定位方案：“position”特性
position和float属性决定使用哪种定位算法来计算一个框的位置。
position：
| 值 | static/relative/absolute/fixed/inherit |
| 初始值 | static |
| 适用于 | 所有元素 |
| 可否继承 | 否 |
| 百分比值 | N/A |
| 计算值 | 同设定值 |
position属性的值分辨有如下的含义：
- static
position属性的默认值。这样的框是一个常规框，会根据常规流来布局。left、top、bottom、top属性对它不适用。 - relative
这样的框的位置是根据常规流来计算的（被称为常规流中的位置）。然后这个框会相对于它在常规流中的位置来进行偏移。当一个框B被相对定位了，它后面元素的位置的计算不会考虑它的偏移，就好像它依然在未偏移前常规流中的位置一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position元素后面元素的位置</title>
<style>
*{margin:0; padding:0;}
.wrap{ width: 200px; height: 200px; border:1px red solid;}
.a1,.a2,.a3{width: 200px; height: 50px; color: #fff;}
.a1{ background-color: #000;}
.a2{position: relative; top:100px; background-color: blue;}
.a3{ background-color: green;}
</style>
</head>
<body>
<div class="wrap">
<div class="a1">a1</div>
<div class="a2">a2</div>
<div class="a3">a3</div>
</div>
</body>
</html>运行代码
上面一个例子运行结果如下：
relative元素a2设置了top属性，从原来的位置移到图片中的位置，但是未影响后面a3元素的位置。
table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption 这些元素运用position：relative无效。 - absolute
absolute框的位置（可能也还有它的尺寸，比如你同时设置top、bottom，后面的章节会举例说明）是由left、right、top、bottom决定的。这些属性指定了框相对于它的包含块的偏移量。绝对定位元素脱离了常规流，也就是它对后面兄弟元素的布局没有影响。而且尽管absolute元素有margin属性，它不会和其他的margins产生折叠（Collapsing）。 - fixed
框位置的计算根据‘absolute’模型，但是框需要一些额外的参考来得到固定。和absolute模型一样,fixed框的margin不会和其他的margin产生折叠。用于手持终端、投影设备、屏幕、TTY、电视媒体类型时，框相对于可视窗口固定，滚动时不移动。应用于打印媒介类型时，框被渲染于每一页， 并相对于页框固定，就好象是通过可视窗口查看该页一样（例如，打印预览）。对于其他的媒介类型，表现没有被定义。
对根元素的 ‘position‘，用户端(UA)可以视为 "static"。
六、框偏移：top、right、bottom、left
如果一个元素的 ‘position‘ 特性值不是 "static"，该元素被称为定位元素。定位的元素生成定位框，其定位基于四个属性：‘top‘，‘right‘，‘bottom‘，‘left‘。
| 值 | length/百分比/inherit/auto |
| 初始值 | value |
| 适用于 | 定位元素 |
| 可否继承 | 否 |
| 百分比值 |
百分比值基于包含块的高度(top, bottom)或者宽度(left, right) |
|
计算值 |
对于 "position:relative" 参见相对定位；对于 "position:static" 取值 "auto"； 其他情况，如果值为长度，取相应的绝对长度，如果标值为百分比，取指定的值，否则，取 "auto"。 |
对于绝对定位的框，这四个特性的值表示，元素的外边界(margin边界)相对于包含块的边界(padding edge)的位移。而对于相对定位的框，偏移量相对于它自己的相应的边界。比如，top是相对于它的顶边界，right相对于右边界。