说脱离文档流之前呢，我们得知道什么是文档流吧。人们常说你脱离组织了，脱离大部队了，你连大部队都没有加入，还脱离个啥呀，是吧。

文档流

我们知道HTML中有盒模型，有行内元素，有块元素，对吧。

行内元素会横向排列，块元素会换行排列，而盒模型呢，又表示每个元素都会占据一定的文档位置。如果不写CSS样式呢，我们单纯的只写HTML标签元素，这些元素们就会遵循文档流的原则，正常排列。当网页元素内容多起来的时候，是不是就像流一样排列起来了。

脱离文档流

但是队伍大了以后呢，总会有那么一些人，觉得自己了不起，想要脱离出来，做一些自己想要做的事情。那么这些元素呢，一旦脱离文档流之后，就不占据原来的位置了，他就飘了，忘乎所以了。

哈哈，其实就是某个元素脱离文档流之后，漂浮在了整体的文档流之外，或者之上，不占据原来位置了。

如何脱离文档流？

🚕比如回到顶部

我们常见的网站，当向下滚动超出一屏的时候，会出现“回到顶部”的功能，无论这个页面如何滚动，他总是在右下角不离不弃。

这不就是 position:fixed 嘛

🚍比如关闭按钮

我们常见的弹出框，会要求水平垂直居中与网页中部，而弹出框右上角会有个关闭按钮。不管网页如何滑动，这个关闭按钮总会在弹出的右上角不离不弃，有些时候这个关闭按钮会在弹出框范围内，有时候会在弹出框范围外。

这不就是外部元素设置 position:relative ，关闭按钮搞个 posiiton:absolute 定位，然后设置其距离顶部和右部的距离嘛

🧚‍♂️比如居右显示

比如一个父元素，里面2个子元素，我们知道，如果是2个行内元素，会居左排列，如果是2个块元素，会换行纵向排列。但其实有很多场景，是希望2个元素，横向，靠边显示的。就像flex布局的justify-content: space-between似的。

这个时候，我们就多了一种解决方案，那就是实用float: right 来将第二个元素居右显示。而且还不怕元素换行，多么美妙啊。