在學習浮動布局之前，我們先來認識一下什麼叫“正常文檔流”？深入了解正常文檔流，對後續的浮動布局和定位布局是非常重要的一個前提，希望讀者一定不要錯過這一節的學習。
什麼叫文檔流？簡單來說，就是元素在頁面出現的先後順序。
那什麼叫“正常文檔流”呢？我們先來看一下正常文檔流的簡單定義：正常文檔流，將窗體自上而下分成一行一行，塊元素獨占一行，相鄰行內元素在每行中按從左到右地依次排列元素。
上面的HTML代碼的文檔流如下：
<div><div> <span></span><span><span> <p></p> <span></span><i><i><img/> <hr/>
我們再好好看看下圖就很容易理解了：
說明：
因為div、p、hr都是塊元素，因此獨占一行。而span、i、img都是行內元素，因此如果兩個行內元素相鄰，就會會位於同一行，並且從左到右排列。
脫離文檔流是相對正常文檔流而言的。正常文檔流就是我們沒有用CSS樣式去控制的HTML文檔結構，你寫的界面的順序就是網頁展示的順序。比如寫了5個div元素。正常文檔流就是按照依次顯示這5個div元素。由於div元素是塊元素，因此每個div元素獨占一行：
HTML代碼：
<div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> <div id="div5"></div>
圖1 正常文檔流顯示
上圖1就是按照正常文檔流顯示的效果圖。
然後，所謂的脫離文檔流就是指它所顯示的位置和文檔代碼的順序不一致了，比如可以用CSS控制，把最後一個div元素顯示在第一個div元素的位置，如下圖：
圖2 脫離文檔流顯示
在圖2中，在不改變HTML代碼順序的前提下，我們可以通過CSS來將id="div5"的div元素從正常文檔流“抽”出來，然後顯示在其他div元素之前。在這種情況下，id="div5"的div元素就已經“脫離正常文檔流”了。
在CSS布局中，我們可以使用浮動或者定位這兩種技術來實現“脫離正常文檔流”，從而隨心所欲地控制著頁面的布局。
“正常文檔流”概念以及“脫離文檔流的工作原理”在CSS中，也是非常重要的理論。這些理論比較抽象，大家在接下來課程的學習和訓練中，要慢慢體會，並且要經常回來復習一下這些理論知識。