css脱离文档流到底是什么意思，脱离文档流就不占据空间了吗？脱离文档流是不是指该元素从dom树中脱离？

有关回应 · 2021-5-28 07:36:34

先引用一段W3C的文档：

9.3 Positioning schemesIn CSS 2.1, a box may be laid out according to three positioningschemes:

Normal flow. In CSS 2.1, normalflow includes block formattingof block-level boxes, inline formattingof inline-level boxes, and relative positioning ofblock-level and inline-level boxes.
Floats. In the float model,a box is first laid out according to the normal flow, then taken out of the flow and shiftedto the left or right as far as possible. Content mayflow along the side of a float.
Absolute positioning. In the absolute positioning model, a box is removed fromthe normal flow entirely (it has no impact on later siblings)and assigned a position with respect to a containing block.
An element is called out offlow if it is floated, absolutely positioned, or is theroot element. An element is called in-flow if it is not out-of-flow. Theflow of an elementA is the set consisting of A and all in-flowelements whose nearest out-of-flow ancestor is A.

来源：Visual formatting model

Q: 脱离文档流就不占据空间了吗？
A: 可以这么说。更准确地一点说，是一个元素脱离文档流（out of normal flow）之后，其他的元素在定位的时候会当做没看见它，两者位置重叠都是可以的。

Q: 脱离文档流是不是指该元素从dom树中脱离？
A: 不是，用浏览器的审查元素就可以看到脱离文档流的元素（例如被float了）依然会出现在dom树里，下面的截图里也可以看到。

那么脱离文档流是什么样子的呢？下面是上锤子的时间~ 以前面文档里写的三种布局方式为例
下文中文档的HTML代码如下：

Out of normal: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi esse impedit autem praesentium magni culpa, amet corporis, veniam consequatur voluptates temporibus. Voluptates eius similique asperiores cupiditate fugit hic atque quisquam? Normal Content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum praesentium nam tempora beatae quis nobis laboriosam alias aliquid, tenetur exercitationem. Odio, aperiam, illo! Eveniet natus dignissimos architecto velit eligendi id! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem reprehenderit velit nam delectus distinctio at unde aliquid officia illo, tempore vitae et incidunt non, ut eos nesciunt quaerat. Enim, minus.

复制代码

CSS代码如下，为了看得更清楚，加一个padding

#outofnormal { width: 200px; background-color: cyan; padding: 10px;}

复制代码

首先普通情况下（也就是在normal flow里）是这样的
要被玩的div：

跟在后面的h2：

可以看到两者是垂直排列，padding互相顶着。3D视图的话就是这样，大家排排坐：

第二种情况：
加上float:left了之后，蓝色的div就脱离文档流了，变成了这样：

因为蓝色的div脱离了文档流，跟在后面的h2和p的盒子都当做没看到这个div的样子去定位，所以他们都顶着浏览器左边和顶部的边框。但是有趣的是，h2和p里面的文本（属于content flow）却都看到了这个被float的div，在自己的盒子里往右推，飘到了蓝色div的边上。这就是float的特性，其他盒子看不见被float的元素，但是其他盒子里的文本看得见。

3D视图的话就是这样。我插~

我插~

我插~

为什么能插呢？因为蓝色div被旁边的盒子无视了呀~

第三种情况：absolute positioning。
删掉float: left，加上postion: absolute。和float一样的是，旁边的盒子无视了蓝色div的存在，也是顶着左边边框定位。但是~ 文本也无视了蓝色div的存在，顶着左边边框定位！

3D视图下也是成功无视之，插入~

总结：
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

有关回应 · 2021-5-28 07:36:35

[h1]文档流的官方概念[/h1]文档流 实际上是一种民间说法，官方说法是 常规流（normal flow）
文档流 的官方概念：元素按照其在HTML文件中的位置顺序，决定它在显示器上如何排布的过程。主要的形式是自上而下，一行接一行，每一行从左至右。
但以上描述的 文档流 概念十分抽象晦涩，对初学者十分不友好。从我用代码实现了无数复杂网页动效以及布局的经验来说，其实 文档流 和现实生活中马路上的车的行驶规则十分相似。
[h1]先来说说html元素的分类[/h1]假设有些车太宽了，只能够独自占据一行车道，那就是 块级元素（black element），比如 div，ul，section 这些都是经典的块级元素。
有的车比较瘦小，可以并排行驶，那就是就是 内联元素（inline element），又叫行级元素，或者行内元素，比如 span 就是经典的内联元素。
从左至右从上到下的车流中，有添加了某些附加属性的超级变形金刚车型，他们的车由默认的只能陆用，变成了路空两用，也就是说可以飞起来。那些还在地上行驶的车辆，可以填补已经飞到天上的车辆空出来的位置，也可以不填补。
[h1]文档流的通俗解释[/h1]文档流用人话来说就是：

天生为 块级元素 的这种车（div为最典型的块级元素），我们可以自定义它的高度宽度（可对其设置width，height属性)，天生就独占一整条车道（width默认为100%，且默认在其前后添加换行）
天生为 行级元素 的这种车（span为最典型的行级元素），我们不能自定义他的高度和宽度（设置width，height无效），天生就喜欢和别人追尾式行驶，不会独占车道（显示时不换行）。
两辆车之间的定位，不是兄弟元素与兄弟元素之间的定位，而是父元素与子元素之间的定位。因为所谓定位，必须一个参照物，如果按相对于兄弟元素定位，那么就有个前提就是兄弟元素是已知的、确定的。但很多时候，比如文章的p标签，可多可少，根本确定不了，假设p标签根据某个兄弟元素定位，但如果p标签的兄弟突然增多了或者减少了呢？所以这种定位方式不现实。相对于父元素定位就不存在这个问题，因为元素肯定会有父元素，没有父元素也有根元素html。
除了默认的static之外的所有车都是可以飞上天的
relative的车飞上天之后原来的车位并不会被后来的车补上，而且他自己围着原来的车位转。
但是absolute和float的飞上天后原来的车位会被文档流紧接着的车补上。
relative飞上天后并不改变元素的display属性，行级的飞上天之后还是行级的，不会无缘无故变成块级。
absolute的车飞上天的话，行级元素则默认强制变块级，因为天上空间充裕，想走多少车道就多少车道，不用和原来在陆地上做行级元素那样憋屈，并且 width 默认为 100%
如果担心飞起来的absolute元素把底下的元素遮挡了，可以使用z-index属性来调整堆叠顺序。z-index是z-坐标轴的意思，index有索引，指数，坐标轴的意思。屏幕上有xy轴，空间上那就有个z轴，垂直屏幕所在平面指向用户的那条。可以取值-1，0，1，就像几张图层。使用z-index属性的前提是元素的position属性要设为relative或者absolute，他对position为static的不起作用。

[h1]元素的定位方案详解[/h1]元素的 定位方案（Positioning Schemes）一共分四种：

静态定位：position: static; （这是所有dom元素默认的定位方案）
相对定位：position: reletive;
浮动定位：float: left; float: right
绝对定位：position: absolute; position: fixed;

position: static（静态定位）：

元素遵循文档流。此时4个定位偏移属性 top，right，bottom，left不会被应用，元素说好听点元素是静态的，说难听点就是是死的，不会动，html如何从左到右从上到下书写，他就怎样排列。

position: relative（相对定位）：

元素遵循文档流，并且参照自身在常规流中的位置通过 top，right，bottom，left 这4个定位偏移属性进行偏移，并且偏移时不会影响文档流中的任何元素。
position: reletive; 的元素很没气节，如果他原来在常规流的默认位置改变了，那他也会跟着变位置，永远围着整个body自己原来的那一小块老地方转。所以说相对定位没有脱离文档流。
一般相对定位元素都是作为绝对定位的参考元素来用的。设置了position为absolute的元素会找到最附近的设置了position为relative的父元素，然后相对于他进行偏移。这个就类似于那个设置了relative的那个父元素是个黑帮大boss，这一片归我管，我里面的设置了absolute的子元素位置都是相对我而言的，和我在文档流旁边的兄弟的没有关系。

float: left / float: right （浮动定位）

会脱离文档流造成父元素高度坍塌，可触发BFC机制或者清除浮动，以解决浮动带来的父元素高度坍塌。
float和position: absolute; 最大的区别在于float会默认让同时有图片和文字的对象有文字环绕图片的效果，类似于旧报纸的文章排版。

position: absolute（绝对定位）：

对象脱离文档流，此时偏移属性参照的是离自身最近的相对定位元素，如果没有相对定位的元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
就是这个东西就是在那里了，不管我爹生的其他娃的位置怎么动，我的位置只跟我爹的位置有关。绝对定位元素脱离了文档流，飞上天有了自己的领地自成江湖。

F12打开chrome浏览器的开发者工具，找到Layers面板，就可以看到当前网页所有图层的3D视图啦！position: fixed（固定定位）：

是一种特殊的绝对定位，也脱离文档流，但偏移定位是以窗口也就是html这个根节点为参考。当滚动浏览器窗口出现滚动条时，对象不会随着滚动。

补充：
有朋友说把div比喻作车不太合适，因为车是刚体，但div有个特性就是，如果不显式声明它的height高度，则该div的高度是由div内容的高度决定的，也就是由div装的东西“撑开”。
因为猫猫吃多少就变胖多少，但如果把猫咪这种液体放进限定宽高的容器，也完全ojbk！所以，div就是只贪吃的小猫咪 (=^^=)
另外：对于程序员来说css设计得的确很反人类，但是网页设计师学css会顺风顺水，欲知详情请戳我

有关回应 · 2021-5-28 07:36:36

脱离文档流，块级元素一个一排地从上向下堆放，行内元素从左往右地堆放，这就是一个标准的流程，脱离了就是不按规矩来了，改从左往右排，打破次元，从二维表面升起来了，跑到原来位置的上空了。如下图：把div2和div3都加上左浮动

不加浮动的图1
添加浮动的图2浮动可以理解为让某个div元素脱离文档流，漂浮在标准流之上，和标准流不是一个层次。
当同时对div2、div3设置浮动之后，div3会跟随在div2之后，div2在例子中都是浮动的，但并没有跟随到div1之后。因此，我们可以得出一个重要结论：
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
除了浮动可以脱离文档流之外， absolute绝对定位也会脱离文档流，而两者不同的是： float 的元素还会在文档流上占据一个位置，如下图：

从上面的效果中可以看出：
1. 文字会围绕float的元素，所以float的元素在文档流还是占有有一席之位的。
2. 文字被absolute的元素遮挡了，说明absolute的元素已经完全脱离文档流，不占位，文字可以无视它的存在。

有关回应 · 2021-5-28 07:36:37

1、什么是文档流？
在窗口自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.
(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序)。
2、脱离文档流
CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
3、脱离文档流就不占据空间了吗？
是的，它已经不属于文档流的范畴中，相当于自定义排位。就相当于它可以不用再排队了，想去哪里就去哪里。
4、脱离文档流是不是指该元素从dom树中脱离？
并没有。我觉得你会问这个问题是没弄清楚什么是dom树

什么是dom树了？

文档树（Document Tree）是HTML页面的层级结构。
文档流你可以理解成定位（位置），
而dom树则是结构。

dom树和文档流有什么差异了？

结构和位置显然是两种不同的东西。
所谓层级结构是指那些元素与元素之间的关系，
包裹我的是我的父集，与我并列的是我的兄弟集，被我包裹的是我的子集，
类似这样的关系称之为层级结构。
而文档流则类似于排队，我本应该在队伍中的，然而我脱离了队伍，但是我与我的父亲，兄弟，儿子的关系还在。

有关回应 · 2021-5-28 07:36:38

脱离文档流是不是指该元素从dom树中脱离?我们知道浏览器绘制DOM树时是按照元素在html文档中出现的顺序绘制出的，这里是针对所有的元素，是不区分normal flow或者是float、absolute的。所有的节点都会出现在DOM中

css脱离文档流到底是什么意思，脱离文档流就不占据空间了吗？脱离文档流是不是指该元素从dom树中脱离？

5 个回复