所谓的文档流，就好比如一块块的正方形组成的一个整体，而这些正方形就代表着每个div。当某个div脱离了这个整体，也就代表他脱离了文档流。然后下一个div就会来填补脱离的div的位置。下面是流程图。
有四个小朋友在买小卖部排队买糖吃~
第一个买完了糖的小朋友脱离了排队的队伍开心的吃糖去。
后面的小朋友看前面的小朋友走了，连忙补上防止别人插队。
实际上，在html页面中，我们看到的会是这样。
div2被div1给覆盖了！因为脱离文档流的div1不占据页面的空间了，所以才会留有空间给后面的div补上，当然这也导致了div2给div1覆盖了！
目前常见的会影响元素脱离文档流的css属性有：
①float浮动。
②position的absolute和fixed定位。
最后，想知道要怎么解决这种覆盖问题的童鞋可以戳这里哦~
————————————————
版权声明：本文为CSDN博主「CruellyJohn」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40421277/article/details/79687268