【前端攻略--HTML/CSS】html 文档流的理解
理解好文档流，有助于我们对css中定位和浮动的理解。什么是文档流呢，经过我看过的一些文章，加入自己的理解。我得出文档流的定义如下：
- 从左至右，从上至上的布局。
- 符合html中标签本身含义的布局，比如某些标签独占一行。有些标签属于行内元素等。
下面来讲一个css中的定位机制，共三种：
- 正常的文档流
- float
- postion
在这几种定位机制中，有几种方式是脱离文档流的。什么是脱离文档流呢？可以这样理解，本来这个标签是属于文档流管理的，那么它应该按照文档流的正常布局方式从左至右从上之下，并且符合标签本身的含义。
脱离文档流是指，这个标签脱离了文档流的管理。不受文档流的布局约束了，并且更重要的一点是，这个标签在原文档流中所占的空间也被清楚掉了。
那么，这几种脱离文档的的定位机制包括哪些呢？
- float
- position：absolute
文档流
写html，css的同学应该需要清楚什么是文档流。
文档流：将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为文档流。
每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动。内联元素也不会独有一行. 一切元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。有三种状况将使得元素离开文档流而存在,分别是浮动、绝对定位、固定定位.
然则在IE中浮动元素也存在于文档流中。
浮动元素不占任何正常文档流空间，而浮动元素的定位照样基于正常的文档流，然后从文档流中抽出并尽能够远的挪动至左侧或许右侧。当一个元素脱离正常文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
基于文档流，理解以下的定位形式:
相对定位：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
绝对定位：即完全离开文档流, 相关于position属性非static值的比来父级元素进行偏移。
固定定位：即完全离开文档流，相关于视区进行偏移。
文档流是文档中可显示对象在排列时所占用的位置。比如网页的div标签它默认占用的宽度位置是一整行，p标签默认占用宽度也是一整行，因为div标签和p标签是块状对象。
网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。当然我们也可以让占用文档流的元素转换成不占文档流，这就要用到CSS中属性position来控制。
看看CSS 2.0对position的定义：检索对象的定位方式。共有4种取值。
absolute：绝对定位。将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。
fixed：固定定位。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。当对象定位在浏览器窗口以外，浏览器不会因此显示滚动条，而当滚动条滚动时，对象始终固定在原来位置。
relative：相对定位。对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。
static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
inherit：继承值，对象将继承其父对象相应的值。
要很好的理解上面这段话，可以用排除法。CSS的定位机制有3种：普通流、浮动（float：left/right/none）和定位 （position:static/relative/absolute/）。
普通流就是正常的文档流，在HTML里面的写法就是从上到下，从左到右的排版布局。
例：
<div id=”01”></div><div id=”02”></div><div></div>很显然这是最普通的文档流，从左到右，一个挨一个按照顺序01先，02其次，03最后排列。
一旦给其中的某个DIV进行FLOAT属性或者absolute定位（不包括static/relative，这两个依然保持正常的文档流），则它完全脱离文档流，不占空间。
例：
为了能更好辨认，我分别给01绿色，02灰色，03黄色。然后再给01左浮动。结果，01脱离了文档流，完全不占空间，所以02顺势顶替了01原来的位置，结果02被01盖住了。
同理，absolute定位跟FLOAT一样，脱离了文档流，不再占原来文档流的空间了。再举一个大家在日常经常遇到的问题来印证—高度自适应
反复想一想，高度自适应的原理其实就是这个：
<div id=”a”>
<div id=”b”>这是b</div>
<div id=”c”>这是c</div>
</div>这个结构是a包住b和c，颜色不变，a的高度为自动，b的高度为100，C的高度为500。b和c都为左浮动
很明显a没有被撑开了。原因是它们浮动了就不再占空间了。既然没有空间可占，那就等于容器里没有东西，所以不撑开。解决办法是在黄色DIV的后面加个DIV，然后清除浮动。让他有空间可占，自然就撑开了。试试！
总结：
1、 CSS的定位机制有3种：普通流、浮动和定位。
2、 文档流：从上到下，从左到右，一个挨一个的简单或者叫正常布局。
3、 定位：（position）
Static：保持文档流。
Relative：相对本身的原始位置发生位移且保持文档流，占空间。
Absolute：脱离文档流，不占空间且相对于其包含块来定位。
4、 浮动：（flaot）脱离文档流，不占空间。
5、 以前总是觉得position：static这个属性很多余，现在看来他的作用就是让元素保持文档流的！
- End -