标准文档流、脱离文档流及脱离文档流的3种方式

目录

一、标准文档流

1、定义

2.现象

二、脱离文档流

1、定义

2、3种方式

（1）浮动

（2）绝对定位absolute 

（3）固定定位fixed 

---

一、标准文档流

1、定义

一个“默认”状态。文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。也就是没有被其他排版浮动和定位相关的CSS属性干扰的就叫标准流。

2.现象

（1）空白折叠现象。比如，如果我们想让img标签之间没有空隙，必须紧密连接。

<img src="img/00.jpg"/><img src="img/02.jpg"/>

若是以下没有紧密连接的情况，则会出现空白折叠现象：

<span class="box1">怎么么怎么怎么啦</span>
<span class="box2">怎么么怎么怎么啦</span>
<span class="box3">怎么么怎么怎么啦</span>

 （2）高矮不齐，底边对齐。
（3）自动换行，一行写不完时，换行写。

二、脱离文档流

1、定义

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

既要实现既要并排，又要设置宽高，此刻就要脱离标准流。

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 

绝对定位使用的参考点是页面的角。绝对定位脱离标准文档物流即脱标。
绝对定位的参考点，如果用top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角:

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

 运行之后结果为:

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

（3）固定定位fixed 

固定定位就是相对浏览器定位，无论页面怎么滚动，他都不会变化。
用途：①固定导航栏②返回顶部