? ? ? ?只有position才是定位碴犬,float不能說(shuō)是定位蒜焊,不過(guò)你可以說(shuō)這兩種布局方式有什么不同蛉艾。float和position這兩者并沒(méi)有孰好孰不好的問(wèn)題停做,兩者按需使用晤愧,各得所需的效果。
? ? ? ?float從字面上的意思就是浮動(dòng),float能讓元素從文檔流中抽出蛉腌,它并不占文檔流的空間官份,典型的就是圖文混排中文字環(huán)繞圖片的效果了。并且float這也是目前使用最多的網(wǎng)頁(yè)布局方式烙丛。不過(guò)需要注意的是清除浮動(dòng)是你可能需要注意的地方舅巷。并且如果你要考慮到IE6兼容問(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è)元素的右下角锨亏。
? ? ? ?總結(jié)一句就是不推薦用position來(lái)布局整個(gè)頁(yè)面的大框架,而推薦用float或者文檔流的默認(rèn)方式忙干。