寫html，css的同學應該需要清楚什么是文檔流。文檔流：將窗體自上而下分成一行一行,並在每行中按從左至右的挨次排放元素,即為文檔流。
每個非浮動塊級元素都獨有一行, 浮動元素則按規則浮在行的一端. 若當時行容不下, 則另起新行再浮動。內聯元素也不會獨有一行. 一切元素(包括塊級,內聯和列表元素)均可生成子行, 用於擺放子元素。有三種狀況將使得元素離開文檔流而存在,分別是浮動、絕對定位、固定定位.
然則在IE中浮動元素也存在於文檔流中。
浮動元素不占任何正常文檔流空間，而浮動元素的定位照樣基於正常的文檔流，然后從文檔流中抽出並盡能夠遠的挪動至左側或許右側。當一個元素脫離正常文檔流后，依然在文檔流中的其他元素將忽略該元素並填補其原先的空間。
基於文檔流，理解以下的定位形式:
相對定位：元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
絕對定位：即完全離開文檔流, 相關於position屬性非static值的比來父級元素進行偏移。
固定定位：即完全離開文檔流，相關於視區進行偏移。
文檔流是文檔中可顯示對象在排列時所占用的位置。比如網頁的div標簽它默認占用的寬度位置是一整行，p標簽默認占用寬度也是一整行，因為div標簽和p標簽是塊狀對象。
網頁中大部分對象默認是占用文檔流，也有一些對象是不占文檔流的，比如表單中隱藏域。當然我們也可以讓占用文檔流的元素轉換成不占文檔流，這就要用到CSS中屬性position來控制。
看看CSS 2.0對position的定義：檢索對象的定位方式。共有4種取值。
absolute：絕對定位。將對象從文檔流中拖出，使用left，right，top，bottom等屬性相對於其最接近的一個最有定位設置的父對象進行絕對定位。如果不存在這樣的父對象，則依據body對象。而其層疊通過z-index屬性定義。當對象定位在瀏覽器窗口以外，瀏覽器因此顯示滾動條。
fixed：固定定位。對象定位遵從絕對(absolute)方式。但是要遵守一些規范。當對象定位在瀏覽器窗口以外，瀏覽器不會因此顯示滾動條，而當滾動條滾動時，對象始終固定在原來位置。
relative：相對定位。對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置。當對象定位在瀏覽器窗口以外，瀏覽器因此顯示滾動條。
static：元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創建一個或多個行框，置於其父元素中。
inherit：繼承值，對象將繼承其父對象相應的值。
要很好的理解上面這段話，可以用排除法。CSS的定位機制有3種：普通流、浮動（float：left/right/none）和定位 （position:static/relative/absolute/）。
普通流就是正常的文檔流，在HTML里面的寫法就是從上到下，從左到右的排版布局。
例：
<div id=”01”></div><div id=”02”></div><div></div>
很顯然這是最普通的文檔流，從左到右，一個挨一個按照順序01先，02其次，03最后排列。
一旦給其中的某個DIV進行FLOAT屬性或者absolute定位（不包括static/relative，這兩個依然保持正常的文檔流），則它完全脫離文檔流，不占空間。
例：
為了能更好辨認，我分別給01綠色，02灰色，03黃色。然后再給01左浮動。結果，01脫離了文檔流，完全不占空間，所以02順勢頂替了01原來的位置，結果02被01蓋住了。
同理，absolute定位跟FLOAT一樣，脫離了文檔流，不再占原來文檔流的空間了。再舉一個大家在日常經常遇到的問題來印證—高度自適應
反復想一想，高度自適應的原理其實就是這個：
<div id=”a”>
<div id=”b”>這是b</div>
<div id=”c”>這是c</div>
</div>
這個結構是a包住b和c，顏色不變，a的高度為自動，b的高度為100，C的高度為500。b和c都為左浮動
很明顯a沒有被撐開了。原因是它們浮動了就不再占空間了。既然沒有空間可占，那就等於容器里沒有東西，所以不撐開。解決辦法是在黃色DIV的后面加個DIV，然后清除浮動。讓他有空間可占，自然就撐開了。試試！
總結：
1、 CSS的定位機制有3種：普通流、浮動和定位。
2、 文檔流：從上到下，從左到右，一個挨一個的簡單或者叫正常布局。
3、 定位：（position）
Static：保持文檔流。
Relative：相對本身的原始位置發生位移且保持文檔流，占空間。
Absolute：脫離文檔流，不占空間且相對於其包含塊來定位。
4、 浮動：（flaot）脫離文檔流，不占空間。
5、 以前總是覺得position：static這個屬性很多余，現在看來他的作用就是讓元素保持文檔流的！