position
position屬性取值：static(默認)、relative、absolute、fixed、inherit。
postision：static；始終處於文檔流給予的位置。看起來好像沒有用，但它可以快速取消定位，讓top，right，bottom，left的值失效。在切換的時候可以嘗試這個方法。
除了static值，在其他三個值的設置下，z-index纔會起作用。（確切地說z-index只在定位元素上有效）
position：relative和absolute都可以用於定位，區別在於前者的div還屬於正常的文檔流，後者已經是脫離了正常文檔流，不佔據空間位置，不會將父類撐開。定位原點relative是相對於它在正常流中的默認位置偏移，它原本佔據的空間任然保留；absolute相對於第一個position屬性值不爲static的父類。所以設置了position：absolute，其父類的該屬性值要注意，而且overflow：hidden也不能亂設置，因爲不屬於正常文檔流，不會佔據父類的高度，也就不會有滾動條。
fixed舊版本IE不支持，卻是很有用，定位原點相對於瀏覽器窗口，而且不能變。常用於header，footer，或者一些固定的懸浮div，隨滾動條滾動又穩定又流暢，比JS好多了。fixed可以有很多創造性的佈局和作用，兼容性是問題。
position：inherit。規定從父類繼承position屬性的值，所以這個屬性也是有繼承性的，@一絲yisi 前輩注意下。但是任何版本的IE都不支持該屬性值。
float
float屬性取值：none(默認)、left、right、inherit。
float：left(或right)，向左（或右）浮動，直到它的邊緣碰到包含框或另一個浮動框爲止。且脫離普通的文檔流，會被正常文檔流內的塊框忽略。不佔據空間，無法將父類元素撐開。
任何元素都可以浮動，浮動元素會生成一個塊級框，不論它本身是何種元素。因此，沒有必要爲浮動元素設置display：block。
如果浮動非替換元素，則要指定一個明確的width，否則它們會儘可能的窄。（什麼叫替換元素？根據元素本身的特點定義的， (X)HTML中的img、input、textarea、select、object都是替換元素，這些元素都沒有實際的內容。 (X)HTML 的大多數元素是不可替換元素，他們將內容直接告訴瀏覽器，將其顯示出來。）
1最直接的clear屬性，該屬性表示的是框的哪邊不應該挨着浮動框。這個屬性是對元素本身而言，通過自動爲該元素增加上外邊距實現的（css1和css2），或者在上外邊距之上增加清除空間，而外邊距本身不改變的方式（css2.1）。clear的缺陷是可能要添加額外無意義的標籤。
2通過父類的浮動也可以清理子類浮動，將空間撐開。這有點像負負得正。但原理應該是浮動的元素也是按照文檔流的方式佈局，只不過它們是另外一個獨立的文檔流，不同於普通文檔流，暫時叫它浮動文檔流？
3hasLayout和BFC都可以清理浮動。overflow：hidden；zoom:1；
display
display屬性取值：none、inline、inline-block、block、table相關屬性值、inherit。
display屬性規定元素應該生成的框的類型。文檔內任何元素都是框，塊框或行內框。
display：none和visiability：hidden都可以隱藏div，區別有點像absolute和relative，前者不佔據文檔的空間，後者還是佔據文檔的位置。
display：inline和block，又叫行內元素和塊級元素。表現出來的區別就是block獨佔一行，在瀏覽器中通常垂直佈局，可以用margin來控制塊級元素之間的間距（存在margin合併的問題，就是@寒冬winter 磨嘰的margin collapse麼- -||，插一句， 只有普通文檔流中塊框的垂直外邊距纔會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。）；而inline以水平方式佈局，垂直方向的margin和padding都是無效的，大小跟內容一樣，且無法設置寬高。inline就像塑料袋，內容怎麼樣，就長得怎麼樣；block就像盒子，有固定的寬和高。
inline-block就介於兩者之間。
table相關的屬性值可以用來垂直居中，效果一般。
定位機制
上面三個屬性都屬於CSS定位屬性。CSS三種基本的定位機制：普通流、浮動、絕對定位。
隨便扯一些居中佈局：
寬高固定可以利用負margin。.center{top：50%;margin-top:-height/2;left:50%;margin-left:-width/2;}話說現在覺得這個方法略微扯淡，要是寬高都知道，直接計算出x的值，設置個margin：x;就好了，多這麼多代碼，沒勁。所以別盡看網上的代碼，能簡則簡，本來就沒有模式。
寬高不固定的元素。.center{display：inline-block},父類設置{text-align:center}
垂直居中table-cell不說了
{line-height：height;vertical-align:middle;}
{position:absolute;top:0;bottom:0;margin:auto}別忘記給父類定位{position:relative;}
p.s.寫技術文章我很不擅長，只會貼代碼，好像還很亂。我解決問題的時候都要各種嘗試，各種搜索，過程很繁雜。折騰完已經不想總結了。這是一種感覺⊙﹏⊙b
原文鏈接：原文鏈接