所謂的文檔流，就好比如一塊塊的正方形組成的一個整體，而這些正方形就代表着每個div。當某個div脫離了這個整體，也就代表他脫離了文檔流。然后下一個div就會來填補脫離的div的位置。下面是流程圖。
有四個小朋友在買小賣部排隊買糖吃~
第一個買完了糖的小朋友脫離了排隊的隊伍開心的吃糖去。
后面的小朋友看前面的小朋友走了，連忙補上防止別人插隊。
實際上，在html頁面中，我們看到的會是這樣。
目前常見的會影響元素脫離文檔流的css屬性有：
①float浮動。
②position的absolute和fixed定位。
div2被div1給覆蓋了！因為脫離文檔流的div1不占據頁面的空間了，所以才會留有空間給后面的div補上，當然這也導致了div2給div1覆蓋了！
如何解決div相互覆蓋層疊問題，如下：
當我們看到div相互層疊覆蓋的時候，首先我們想到的是否有div脫離了文檔流？其次我們在分析他們是通過什么方法脫離文檔流的？
目前，常見的脫離文檔流的方法有position定位和float浮動兩種！
1、如果這個div是通過float導致的脫離文檔流的話，可以通過上面的div和下面的div之間插入清除浮動
2、如果是position絕對定位（absolute）導致某個div脫離了文檔流，從而使下面的div（即div2）和上面的div（div1）相互層疊了。那么，該如何解決呢？
首先，切忌對下一個div使用position定位來解決問題，不然這就是一個坑
①“替死鬼”法
制作多一個div（即div3）來代替div2，使得這個新制作出來的div3來填補這個文檔流的缺漏（為脫離文檔流的div1填補）。
不單單制作出來div3出來后就算了，還要設置他的高度height為div1的高度。這樣子就好像恢復如初，回到最初的未改變文檔流一樣！（嘻嘻~，障眼法~）
暫時就想到一個辦法，后續想到會繼續補充！
參考：https://blog.csdn.net/qq_40421277/article/details/79687268
另外脫離文檔流的三種方法，參考：https://www.cnblogs.com/ning123/p/11011845.html