CSS标准文档流和脱离文档流

文档标准流：

简单来说标准流就是浏览器按照各种元素标签排版布局中默认的状态，浏览器在渲染代码的时候是从左往右、从上到下开始渲染，元素也是从左往右、从上往下的流式排列。也就是没有被其他排版浮动和定位相关的CSS属性干扰的就叫标准流。

脱离文档流：

1、如果元素不再满足浏览器的默认布局排版，也就是说将元素从默认的布局排版中拿走，此时这个元素不再占有它在标准流中的位置。那么这时这个元素就脱离了文档标准流，此时就是脱离文档流了。
2、元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。
3、脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

造成脱离文档流的几种情况

1. 浮动
   如果给一个元素添加了float属性，那么它将脱离文档流，并不在占有原来的位置。例如执行下面这段代码：
   
   得到的结果是：

虽然我们div3的高度是40px，但是由于div2浮动了，所以div2不再占有文档标准流中的位置，所以div3就填补了20px的div2的位置，然后div2漂浮在文档标准流之上，所以div3填补的那20px就没有显示出来。

如果我们让div2向右浮动。得到的结果就是:

可见刚刚的分析是对的。

使用浮动的初心就是为了让几个div在同一行显示，两个同时使用了float的元素，如果能在一行显示的下就会浮动到一行显示，如果不能就算使用了float也会在不同的行显示，但是他们依然脱离了标准文档流。

如果使用了浮动的元素的上一个元素是标准流中的元素，如上面例子中的div2使用了浮动,div1是标准流，此使div2的顶部是与div1的底部对齐的而不会与div1在同一行显示。如果div1也使用了浮动，那么在空间允许的情况下div2会 和div1在同一行显示。

2. 定位(绝对定位absolute和固定定位fixed)

CSS中定位方式有static,absolute,fixed,elative，而使得元素脱离文档标准流的定位方式只有absolute和fixed两种方式。其它两种方式任然会占有原来的地方。

1. 绝对定位(absolute)

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。所以给一个绝对定位的框添加边距时是相对其包含框的，但是如果没调整边距，默认情况是和上一个元素对齐
例如下面这段代码:

运行之后结果为:

因为h2脱离标准流，所以向上移动代替了h2原先的位置。

2. 固定定位：

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

例子和绝对定位差不多，就不写了。只是它会一直固定在浏览器上，而绝对定位还是会随着浏览器的滚动而滚动的。