文档流、常见的脱离文档流的属性

一、文档流：

所谓的文档流，就好比如一块块的正方形组成的一个整体，而这些正方形就代表着每个div。当某个div脱离了这个整体，也就代表他脱离了文档流。然后下一个div就会来填补脱离的div的位置。下面是流程图:

有四个小朋友在买小卖部排队买糖吃~

第一个买完了糖的小朋友脱离了排队的队伍，开心的吃糖去了…

后面的小朋友看前面的小朋友走了，连忙补上防止别人插队…

实际上，在html页面中，我们看到的会是这样:

div2被div1给覆盖了！因为脱离文档流的div1不占据页面的空间了，所以才会留有空间给后面的div补上，当然这也导致了div2给div1覆盖了！

二、目前常见的会影响元素脱离文档流的css属性有：

①float浮动。
②position的absolute和fixed定位。