一、什么是文檔流？
將窗體自上而下分成一行一行，並在每行中按從左至右依次排放元素，稱為文檔流，也稱為普通流。
這個應該不難理解，HTML中全部元素都是盒模型，盒模型占用一定的空間，依次排放在HTML中，形成了文檔流。
二、什么是脫離文檔流？
元素脫離文檔流之后，將不再在文檔流中占據空間，而是處於浮動狀態（可以理解為漂浮在文檔流的上方）。
脫離文檔流的元素的定位基於正常的文檔流，當一個元素脫離文檔流后，依然在文檔流中的其他元素將忽略該元素並填補其原先的空間。
三、怎么脫離文檔流？
1：float
使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在該元素的周圍。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .first { width: 200px; height: 200px; border: 3px solid red; float: left; } .second { width: 200px; height: 100px; border: 3px solid blue; } </style> </head> <body> <div class="first">123</div> <div class="second">456</div> </body> </html>
運行效果：
這段代碼中把紅色的框設置為了左浮，所以紅色的框稱為了浮動狀態（浮動在藍色框的上面），而藍色框占用了原來空色框的位置。
注意到，藍色框中的文本依然認為紅色框存在，所以為紅色框讓出了位置。
由於div是塊狀元素，所以456出現在下方。
2：absolute
absolute稱為絕對定位，覺得應該稱為相對定位，
因為使用absolute脫離文檔流后的元素，是相對於該元素的父類（及以上，如果直系父類元素不滿足條件則繼續向上查詢）元素進行定位的，
並且這個父類元素的position必須是非static定位的（static是默認定位方式）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .first { width: 200px; height: 200px; border: 3px solid red; } .second { width: 200px; height: 100px; border: 3px solid blue; position: absolute; } .third { width: 200px; height: 200px; border: 3px solid green; } </style> </head> <body> <div class="first">123</div> <div class="second">456</div> <div class="third">789</div> </body> </html>
運行效果：
通過把藍色的框的position設置為absolute使藍色的框變為浮動狀態，可以看到綠色的框被藍色的框遮擋。
emmm...，看起來貌似沒有問題，但是還記得前面說的absolute是相對誰定位的嗎？
相對非static元素的父級定位的，這里藍框的父級就是html，所以應該是相對於html定位，
但是代碼中沒有提供相對位置，所以只能浮動在原來該元素在文檔流中的位置上方。
3：fixed
完全脫離文檔流，相對於瀏覽器窗口進行定位。（相對於瀏覽器窗口就是相對於html）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .first { width: 200px; height: 200px; border: 3px solid red; } .second { width: 200px; height: 100px; border: 3px solid blue; position: fixed; right: 0; top: 0; } .third { width: 200px; height: 200px; border: 3px solid green; } html { border: dotted; } </style> </head> <body> <div class="first">123</div> <div class="second">456</div> <div class="third">789</div> </body> </html>
可以很明顯的看出，藍色的框是相對於html進行定位的。
如果不提供相對位置的話，藍色的框會浮動在其原先在文檔流中的位置上方。