Position、Float可以說是使用頻率非常高的兩個CSS屬性，使用上容易存在一些模糊不清晰的地方。這裡系統的複習一遍。

一、HTML文件呈現方式

如果要掌握、運用好Position、Float屬性必須要對HTML的兩個基本點有清晰的瞭解：
盒子模型（box model） 和 HTML的普通流（normal flow）

1、盒子模型

在HTML中元素的盒子模型分為兩種：塊狀元素、行內元素，請注意這裡的塊狀元素（Block）和行內元素（Inline）與Display屬性中的inline、block兩個屬性值並不等同。盒子模型中的Inline、Block類似於是Display屬性的父類，例如：Display屬性中的list-item屬性值是屬於塊狀（Block）型別的。

我們直觀的看兩種盒子模型的區別

塊狀（Block）型別的元素可以設定width、height屬性，而行內（Inline）型別設定無效。
塊狀（Block）型別的元素會獨佔一行（直觀的說就是會換行顯示，無法與其他元素在同一行內顯示，除非你主動修改元素的樣式），而行內（Inline）型別的元素則都會在一行內顯示。
塊狀（Block）型別的元素的width預設為100%，而行內（Inline）型別的元素則是根據自身的內容及子元素來決定寬度。
列舉出一些大家常見的元素的分類

塊狀元素：P、DIV、UL、LI、DD、DT…
行內元素：A、IMG、SPAN、STRONG…

2、HTML的普通流

瀏覽器在讀取HTML原始碼的時候是根據元素在程式碼出現的順序讀取，最終元素的呈現方式是依據元素的盒子模型來決定的。行內元素是從左到右，塊狀元素是從上到下。

如果你不改變元素的預設樣式前提下，元素在HTML的普通流中會“佔用”一個位置，而“佔用”位置的大小、位置則是由元素的盒子模型來決定。因此，在後續講的Position、Float屬性是否會使元素脫離這個普通流是一個關鍵點。

3、關於脫離文件流

所謂脫離文件流，即將元素從普通的佈局排版中拿走，其他盒子在定位的時候，會當沒看到它，兩者位置重疊都是可以的。浮動脫離文件流（float）和絕對定位脫離文件流（position:absolute）是有區別的。

使用float脫離文件流時，其他盒子會無視這個元素，但其他盒子內的文字依然會為這個元素讓出位置，環繞在周圍。

而對於使用absolute :position脫離文件流的元素，其他盒子與其他盒子內的文字都會無視它。

二、position屬性

Position屬效能夠很好的體現HTML普通流這個特徵。重點在於應用了不同的position值之後是否有脫離普通流和改變Display屬性這兩點。

Position的屬性值共有四個static、relative、absolute、fixed。

1、Static

所有元素在預設的情況下position屬性均為static，而我們在佈局上經常會用到的相對定位和絕對定位常用的屬性top、bottom、left、right在position為static的情況下無效。其用法為：在改變了元素的position屬性後可以將元素重置為static讓其迴歸到頁面預設的普通流中。

2、Relative

俗稱的相對定位，重點在於對相對理解。我們此前說過每個元素在頁面的普通流中會有“佔用”一個位置，這個位置可以理解為預設位置，而相對定位就是將元素偏離元素的預設位置，但普通流中依然保持著原有的預設位置，並沒有脫離普通流，只是視覺上發生的偏移。

<style type="text/css">
div{
	 width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff;
 }
</style>
<div style="background: blue">A</div>
<div style="background: red; position: relative; top: 20px; left: 20px;">B</div>
<div style="background: green">C</div>

很明顯的看出在元素C依然還是保留在原位，並沒有因為元素B發生了偏移而隨之變化。

position: relative並沒有改變行內元素的Display屬性，這個概念非常重要（注意與接下來的absolute的區別）。

3、Absolute

俗稱的絕對定位，絕對定位是相對而言的，怎麼理解呢？應用了position: absolute的元素會循著節點樹中的父（祖）元素來確定“根”，然後相對這個“根”元素來偏移。如果在其節點樹中所有父（祖）元素都沒有設定position屬性值為relative或者absolute則該元素最終將對body進行位置偏移。
應用了position: absolute的元素會脫離頁面中的普通流並改變Display屬性（重點）！

1）塊狀元素在position(relative/static)的情況下width為100%，但是設定了position: absolute之後，會將width變成auto（會受到父元素的寬度影響）。

2）元素設定了position: absolute之後，如果沒有設定top、bottom、left、right屬性的話，瀏覽器會預設設定成auto，而auto的值則是該元素的“預設位置”。

3）position: absolute忽略根元素的padding。

4）行內元素在應用了position：absolute之後會改變display。
因此，要注意到relative是並沒有改變行內元素的呈現模式，而absolute是會改變行內元素的呈現模式，如果設定了absolute並不需要顯式的的將元素display改成block。

5）應用了position: absolute / relative之後，會覆蓋其他非定位元素（即position為static的元素），如果你不想覆蓋到其他元素，也可以將z-index設定成-1。

4、Fixed

在很長的時間裡，這個屬性值因為相容性問題，並沒有得到非常廣泛的應用（IE6未實現該屬性值）。fixed和absolute有很多共同點：

會改變行內元素的呈現模式，使display之變更為block。
會讓元素脫離普通流，不佔據空間。
預設會覆蓋到非定位元素上。

fixed與absolute最大的區別在於：absolute的”根元素“是可以被設定的，而fixed則其”根元素“固定為瀏覽器視窗。即當你滾動網頁，其元素與瀏覽器視窗之間的距離是恆定不變的。

三、float屬性

float的屬性值有none、left、right，有幾個要點：

只有橫向浮動，並沒有縱向浮動。
當元素應用了float屬性後，將會脫離普通流，其容器（父）元素將得不到脫離普通流的子元素高度。
會將元素的display屬性變更為block。
浮動元素的後一個元素會圍繞著浮動元素（典型運用是文字圍繞圖片），與應用了position的元素相比浮動元素並不會遮蓋後一個元素。
浮動元素的前一個元素不會受到任何影響（如果你想讓兩個塊狀元素並排顯示，必須讓兩個塊狀元素都應用float）。

四、float與position的相容性

1）元素同時應用了position: relative、float、（top / left / bottom / right）屬性後，則元素先浮動到相應的位置，然後再根據（top / left / bottom / right）所設定的距離來發生偏移。

2）元素同時應用了position: absolute及float屬性，則float失效。

3）第一個元素應用了position之後會覆蓋著接下來的float元素（如果兩個元素所處的位置相同）

4）同時應用position: absolute和float: left會導致清除浮動無效（position: relative則可以清除浮動）。
常用的清除浮動的方法有兩種：

通過在容器中新增一個標籤，設定該標籤的樣式為 clear: both
容器設定overflow: hidden

參考資料：
http://www.cnblogs.com/coffeedeveloper/p/3145790.html
https://blog.csdn.net/ParanoidYang/article/details/62062828