一、文檔流
1. 什么是文檔流？
將窗體自上而下分成一行一行，並在每行中按照從左到右依次排放元素，稱為文檔流（normal stream又稱普通流）
在html中，html元素都是盒模型，盒子模型占用一定的空間，依次排放在html 中，形成了文檔流。
2. 什么是脫離文檔流？
元素脫離文檔流之后，將不再在文檔流中占據空間，而是處於浮動狀態（可以理解為漂浮在文檔流的上方）。
脫離文檔流的元素的定位基於正常的文檔流，當一個元素脫離文檔流后，依然在文檔流中的其他元素將忽略該元素並填補其原先的空間。
二、怎么脫離文檔流
1. float
一個元素浮動時，其他內容會“環繞”該元素。（權威指南P289）
2. position
a. position：absolute
絕對定位，absolute脫離文檔流后的元素，是相對於該元素的父類（及以上，如果直系父類元素不滿足條件則繼續向上查詢）元素進行定位的，並且這個父類元素的position必須是非static定位的（static是默認定位方式）。
當父級元素的position全是static的時候，absolute是相對於html來進行定位的。
注意：絕對定位的窗口一般都要設置相對距離，當你同時設置top和bottom的時候，只有top會生效，同理，同時設置left和right的時候，只有left會生效。
b. position：fixed
固定定位，完全脫離文檔流，相對於瀏覽器窗口進行定位。（相對於瀏覽器窗口就是相對於html）。
c. position：relative
相對定位，元素框偏移某個位置，元素保持未定位前的形狀，他原本所占的空間保留。
三、怎么恢復文檔流
1. 對於float的元素，對父級元素可以使用overflow：hidden
2. clear：both