想要深入理解css的定位機制和css浮動產生的影響，都離不開一個概念“文檔流”。那麼什麼是文檔流呢？
字面理解，文檔就是Doctype。“流”就是“輸入”和“輸出”，即“布局”和“顯示”。
普通流就是正常的文檔流，在HTML裡面的寫法就是從上到下，從左到右的排版布局。每個非浮動塊級元素都獨占一行，從上到下排列， 內聯元素則從左到右排列。
有三種情況會使得元素脫離文檔流而存在，分別是：浮動、絕對定位、固定定位。
這樣來說，css的3種格式化模型就是：普通流、絕對定位和浮動。
1.基於文檔流，css的三種定位機制也就不難理解了：相對定位，即相對元素在文檔流中的位置進行偏移，保留占位。
絕對定位，即完全脫離文檔流，相對於position屬性非static值的最近父元素進行偏移。
固定定位，即完全脫離文檔流，相對於視區進行偏移。
position屬性的默認值是static，它的本意也就是元素在文檔流中。
脫離文檔流的絕對定位或者固定定位元素是可以覆蓋普通流的元素的，由於他不占據空間，也不會影響父div的寬高。
2.浮動浮動常用在塊級元素上，普通流裡的塊級元素會獨占一行，而應用了float的元素就脫離了文檔流，可以多個一排，其作用與display:inline-block相似。由於脫離文檔流的元素是不占據空間的，所以添加了CSS浮動的元素會對其周圍的其他元素產生或多或少的影響。
為了更好理解“CSS文檔流”這個概念，請查看CSS入門教程中的“CSS文檔流”
本文來源：最初的你-新浪博客（http://blog.sina.com.cn/s/blog_51048da70101813a.html）