其實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的元素就會是基于它的定位了。比如你可以讓一個按鈕始終顯示在一個元素的右下角。
所以position和float是兩個概念，按需所用。
上一篇： 添加內容時文字的顯示與隱藏
下一篇： 網站前端開發都需要掌握哪些知識
關鍵詞:
