position和float的區別

2021-08-07 10:56:27 字數 743 閱讀 6675

只有position才是定位,float不能說是定位,不過你可以說這兩種布局方式有什麼不同。float和position這兩者並沒有孰好孰不好的問題,兩者按需使用,各得所需的效果。

float從字面上的意思就是浮動,float能讓元素從文件流中抽出,它並不佔文件流的空間,典型的就是**混排中文字環繞的效果了。並且float這也是目前使用最多的網頁布局方式。不過需要注意的是清除浮動是你可能需要注意的地方。並且如果你要考慮到ie6相容問題。

而position顧名思義就是定位。他有以下這幾種屬性:static(預設),relative(相對定位),absolute(絕對定位)和fixed(固定定位)。其中static和relative會佔據文件流空間,他們並不是脫離文件的。absolute和fixed是脫離文件流的,不會佔據文件流空間。

比較可以發現,float和position最大的區別其實是是否佔據文件流空間的問題。雖然position有absolute和fixed這兩個同樣不會佔據文件流的屬性,但是這兩個並不適合被用來給整個網頁做布局。為什麼?因為這樣你就得為頁面上的每乙個元素設定乙個xy座標來定位。

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

總結一句就是不推薦用position來布局整個頁面的大框架,而推薦用float或者文件流的預設方式。

position和float的結合運用

剛做的幫助中心還沒有明白裡面的奧妙,這裡又碰到了,absolute讓relative的可以不按照float的div約束。content contentleft contentright 定義了上面的打的div和下面左右兩個div,由於有head和foot的關係,因為header和footer都有re...

float布局和position布局的簡單區別

這裡要講解的區別是float布局和position中的absolute布局的區別。因為它們兩個都是把標籤文件流中拉了出來。但是具體實現時,它們兩個的效果又有點區別。float被稱為浮動布局。屬性值為 left,right,none 效果圖 很明顯可以看到橘黃色div裡面的文字就被影響到了。lang ...

css之float和position的微小區別

float和position都可以利用浮動對元素進行定位,但是有一點微小的區別 position使元素完全脫離文件流 float使元素半脫離文件流 什麼意思?看下面的例子 我是class1 這是float的測試局 效果圖 可以看到,class2中的文字都已經佔據class1的位置 使用float 我...