首先岳服，什么是文檔流破停。筆者百度了一下 說的是“文檔流是文檔中可顯示對象在排列時所占用的位置”珍德。在css中可以理解為元素的普通排版泣矛，就是元素在自身的特性下的基本排列（比如說塊元素獨占一行）旦棉，從上到下齿风，從左到右药薯。所以文檔流還可以叫做普通流，正常流救斑。
但是通過css設(shè)置了元素的float屬性以后童本，元素就脫離了文檔流。此時可以理解為將元素從普通的布局排版中拿走脸候，其他盒子在定位的時候穷娱，會當(dāng)做脫離文檔流的元素不存在而進(jìn)行排列。代碼如下：
此時div1盒子脫離了文檔流运沦，雖然看起來還是原來的位置泵额，但是其實浮動起來了，相當(dāng)于我們是以90度垂直往下看携添，如果我們站在水平面上面看的話會發(fā)現(xiàn)有div1和div2兩層嫁盲。可以理解為上面說的其他盒子在定位的時候薪寓，會當(dāng)做脫離文檔流的元素不存在而進(jìn)行排列亡资。
但是如果我們在盒子里面加一點東西會怎么樣呢。
可以看到并不是如我之前所說當(dāng)脫離文檔流的元素不存在向叉，究竟是怎么回事呢锥腻？此時就涉及到了另外一個概念了，就是文本流母谎。如果說文檔流是相對于盒子模型來講的瘦黑，那么文檔流就是相對于文字段落來講的。此時的浮動元素的確脫離了文檔流奇唤，但是并沒有脫離文本流幸斥。所以文字就會環(huán)繞在浮動元素的周圍了。
如果有同學(xué)學(xué)過ps咬扇，可以用ps中的圖層來解釋甲葬，文檔流在最下面，相當(dāng)于背景懈贺，浮動元素和文本元素相當(dāng)于在同一個圖層上面经窖。上面的圖層即擋住了下面的圖層。如果要改變這種情況的話梭灿，ps可以改變圖層的排列順序解決画侣，那么在css中如何解決呢”ざ剩可以用z-index配乱，默認(rèn)的層級是1，所以只要設(shè)置比想要覆蓋的元素的z-index高的就可以了。
由于本人還處在菜鳥階段搬泥，未免會有一些錯誤桑寨，希望看到的同學(xué)能夠指出來，筆者一定改正忿檩，不誤導(dǎo)其他人西疤。第一次寫總結(jié)，啰嗦了一點休溶，文筆也不行代赁，一定會加以改正。最后兽掰，感謝閱讀芭碍。
