relative会脱离文档流吗_脱离文档流和恢复文档流的方法

@[toc]

1. 什么是文档流？

将窗体自上而下 分成一行一行，并在每行中按照从左到右依次排放元素，称为文档流(normal stream又称普通流)

在html 中，html元素都是盒模型，盒子模型占用一定的空间，依次排放在html 中，形成了文档流。

2. 什么是脱离文档流

元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态(可以理解为漂浮在文档流的上方)。

脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

二、怎么脱离文档流

1. float

一个元素浮动时，其他内容会“环绕”该元素。(权威指南P289)

2. positiona. position：absolute

绝对定位，absolute脱离文档流后的元素，是相对于该元素的父类(及以上，如果直系父类元素不满足条件则继续向上查询)元素进行定位的，并且这个父类元素的position必须是非static定位的(static是默认定位方式)。

当父级元素的position全是static的时候，absolute是相对于html来进行定位的。

注意：绝对定位的窗口一般都要设置相对距离，当你同时设置top和bottom的时候，只有top会生效，同理，同时设置left和right的时候，只有left会生效。b. position：fixed

固定定位，完全脱离文档流，相对于浏览器窗口进行定位。(相对于浏览器窗口就是相对于html)。c. position：relative

相对定位，元素框偏移某个位置，元素保持未定位前的形状，他原本所占的空间保留

三、怎么恢复文档流对于float 的元素，对父级元素可以使用overflow：hidden

(看到这篇文章的小伙伴可以留言，目前我只记得这一种方法)