CSS定位及文檔流

今天看到一個面試題問哪一種css的屬性不會讓div脫離文檔流，答案有position分別是relative，abosolute，fixed及float的選項

當時看到題不是太明白什麼是文檔流，查了下normal flow，其實就是html中從上到下，從左到右的顯示順序

在這個過程當中, 行內元素水平排列, 直到當行被佔滿而後換行; 塊級元素則會被渲染爲完整的一個新行（好比DIV就是一個塊級元素）

接下來再看看CSS中的浮動機制float，float會讓當前元素漂移到左右，其它的佈局會感知不到這個元素了，因此是脫離了正常的文檔流的。

接下來看看css中3種定位機制，abosolute是相對於第一個父元素進行定位（注意是有非static的position的，好比relative或者absolute的），fixed是相對於瀏覽器窗口進行定位，這2個都會脫離文檔流。而relative是相對於該元素正常位置進行定位，其周邊的元素不會變，因此使用了relative定位的元素是不脫離文檔流的。

參考文檔：

http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html

https://tink.gitbooks.io/fe-collections/content/ch03-css/normal-flow.html