其實(shí)float最初是用來(lái)調(diào)節(jié)包圍文字的,position是用來(lái)調(diào)節(jié)文檔流中位置的, float和position這兩者并沒(méi)有孰好孰不好的問(wèn)題,兩者按需使用,各得所需的效果。
float從字面上的意思就是浮動(dòng)。float能讓元素從文檔流中抽出,它并不占文檔流的空間,典型的就是圖文混排中文字環(huán)繞圖片的效果了。并且float這也是目前使用最多的網(wǎng)頁(yè)布局方式。不過(guò)需要注意的是清除浮動(dòng)是你可能需要注意的地方。并且如果你要考慮到古老的IE6之類(lèi)的還會(huì)有一些bug諸如雙邊距等等問(wèn)題。
而position顧名思義就是定位。他有以下這幾種屬性:static(默認(rèn)),relative(相對(duì)定位),absolute(絕對(duì)定位)和fixed(固定定位)。其中static和relative會(huì)占據(jù)文檔流空間,他們并不是脫離文檔的。absolute和fixed是脫離文檔流的,不會(huì)占據(jù)文檔流空間。
比較可以發(fā)現(xiàn),float和position最大的區(qū)別其實(shí)是是否占據(jù)文檔流空間的問(wèn)題。雖然position有absolute和fixed這兩個(gè)同樣不會(huì)占據(jù)文檔流的屬性,但是這兩個(gè)并不適合被用來(lái)給整個(gè)網(wǎng)頁(yè)做布局。為什么?因?yàn)檫@樣你就得為頁(yè)面上的每一個(gè)元素設(shè)置一個(gè)xy坐標(biāo)來(lái)定位。
float布局就顯得靈活多了。但是一些特殊的地方搭配relative和absolute布局可以實(shí)現(xiàn)更好的效果。因?yàn)閍bsolute是基于父級(jí)元素的定位,當(dāng)父級(jí)元素是relative的時(shí)候,absolute的元素就會(huì)是基于它的定位了。比如你可以讓一個(gè)按鈕始終顯示在一個(gè)元素的右下角。
所以position和float是兩個(gè)概念,按需所用。