文档流与定位、浮动

css中共有三种定位机制：

1. 正常的文档流
2. float
3. postion

脱离文档流的定位机制有：

1. float
2. position：absolute
3. position：fix

1、概念：

文档流（normal flow），也译为正常流、普通流，指从左到右，从上到下布局，符合html中标签本身含义的布局。是相对于盒子模型讲的。
文本流（text flow）是指html文本的显示，相对于文字段落讲的。

2、什么是脱离文档流呢？

本来这个标签是属于文档流管理的，那么它应该按照文档流的正常布局方式从左至右从上之下，并且符合标签本身的含义。
脱离文档流就是这个标签脱离了文档流的管理。不受文档流的布局约束了，并且这个标签在原文档流中所占的空间也被清除掉了。

3、脱离文档流定位机制详解

1. float：脱离了文档流，但没有脱离文本流。

元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，
直接在它占据的区域布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有脱离文本流。

1. position：absolute 脱离了文档流和文本流

绝对定位后，不仅元素盒子会脱离文档流，文字也会脱离文本流。那么后面
元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕。

当然你可以使用 index-z 来让底部的元素到上面来，类似于一个图层的概念

1. position：fixed 脱离了文档流和文本流

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。

Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持.