CSS 佈局之 float 和 position

float和position這二者並無孰好孰很差的問題，二者按需使用，各得所需的效果。
float從字面上的意思就是浮動，這種在印刷排版之類中可能解釋的更加貼切。float能讓元素從文檔流中抽出，它並不佔文檔流的空間，典型的就是圖文混排中文字環繞圖片的效果了。而且float這也是目前使用最多的網頁佈局方式。不過須要注意的是清除浮動是你可能須要注意的地方。而且若是你要考慮到古老的IE6之類的還會有一些bug諸如雙邊距等等問題。
而position顧名思義就是定位。他有如下這幾種屬性：static(默認)，relative(相對定位)，absolute(絕對定位)和fixed(固定定位)。其中static和relative會佔據文檔流空間，他們並非脫離文檔的。absolute和fixed是脫離文檔流的，不會佔據文檔流空間。

比較能夠發現，float和position最大的區別實際上是是否佔據文檔流空間的問題。雖然position有absolute和fixed這兩個一樣不會佔據文檔流的屬性，可是這兩個並不適合被用來給整個網頁作佈局。爲何？由於這樣你就得爲頁面上的每個元素設置一個xy座標來定位。

float佈局就顯得靈活多了。可是一些特殊的地方搭配relative和absolute佈局能夠實現更好的效果。由於absolute是基於父級元素的定位，當父級元素是relative的時候，absolute的元素就會是基於它的定位了。好比你可讓一個按鈕始終顯示在一個元素的右下角。

若是說到性能問題reflow問題，將元素的position設置爲absolute和fixed可使元素從DOM樹結構中脫離出來獨立的存在，而瀏覽器在須要渲染時只須要渲染該元素以及位於該元素下方的元素，從而在某種程度上縮短瀏覽器渲染時間。因此若是是製做js動畫等，用absolute或者fixed定位會更好。

說得很差的地方請你們補充。總結一句就是不推薦用position來佈局整個頁面的大框架，而推薦用float或者文檔流的默認方式。