html預設的是按照流的方式，對塊元素按出現的順序從上到下排列，每出現一個塊元素，進行一個換行，

而內聯元素，在塊元素內從左上角向右下方流，文字則當作一個特殊的內聯元素，由瀏覽器根據需要分割成不同長度。

但有幾種特殊方式可以改變這個定位。

1，浮動佈局，使用float屬性 ，其有兩個值，left，right，代表向左或向右浮動。

     使用float時，html以流的方式正常載入頁面，直到碰到有float屬性的元素時，會將其從流中刪除，並使相應的元素向左或向浮動，後面的塊元素繼續載入，因為已經從流中刪除，塊元素會填充浮動元素所在的區域，但是內聯元素，會知道其邊框所在，並圍繞它。

        有float屬性的元素之前元素的css屬性會生效，如float元素在某一個div中，那他左右浮動也是相對於這個div，而且有float屬性的元素與別的元塊的外邊距不折疊（這點針對他之前的塊元素），另有float屬性的元素，必須有寬度，另有clear（值為left,right）屬性，可以讓別的元素，不與其接觸。

2，凝膠布局

     在所有容外面新增一個元素，如div，包圍所有元素，設定寬度，再設定margin-left ， margin-right 值為auto，這樣內容會一直居中於頁面中間，比較適用於論壇這類，如百度貼吧。

3，使用position屬性

    position有四個屬性，static (靜態，預設),absolute(絕對佈局), Fixed(固定佈局), relative(相對佈局)

    其中static是預設值，

    absolute是絕對佈局，會從流中徹底刪除，因為從流中徹底刪除，塊元素與內聯元素會徹底忽略該元素，填充其所在匹域。

    絕對佈局是指相對於頁面的佈局，會根據頁面大小變化而變化。

   Fixed固定佈局，是指相對於視窗的佈局，也會從流中徹底刪除，但不會根據頁面的大小而位置變化

   absolute與Fixed都有z-index屬性，其值為數字，可正可負，越大的位置離你越近，即顯示在最上面，且有最大值

   relative相對佈局，仍在流中，只對原先位置的一定偏移

4，表格顯示佈局

配置屬性為  display:table 指表

                    display:rable-row 指行

                    display:table-cell指單元格，

                    使用div最外層為table,裡面用table-row，再table-cell.

以上內容為筆記，如有錯誤請指示，如不詳細請見諒， 謝謝