浮動和定位的區別

2022-06-11 21:48:12 字數 814 閱讀 2781

動 ( float ) 和絕對定位 ( position:absolute )

相同點:(1)都是漂起來( 離開原來的位置 )

(2)並且都不佔著原來的位置

(3)另外,如h1包文字的標籤,預設只設height的情況下,它的width是鋪滿父元素的寬度的,而當浮動或絕對定位後,它的寬度就是h1內文字的寬度

不同點:float後,(這裡float:left )它後面的物件,會佔據它原來的位置,

但是後面物件裡的文字和等好像知道它在左邊,所以他們會自動的在它右邊顯示,

也就是,後面物件的文字等不會被它擋住

position:absolute絕對定位後,它後面的物件,也會佔據它原來的位置,

但是後面的物件,完全視它不存在,直接在左上角顯示,

也就是,後面物件的文字等左上部分會被它擋住

預設情況下(即h3不設浮動、不設絕對定位)

h3設float情況下

h3設絕對定位情況下

絕對定位和浮動的區別和運用

當乙個元素使用絕對定位後,它的位置將依據瀏覽器左上角開始計算或相對于父容器 在父容器使用相對定位時 絕對定位使元素脫離文件流,因此不佔據空間。普通文件流中元素的布局就當絕對定位的元素不存在時一樣。因為絕對定位的框與文件流無關,所以它們可以覆蓋頁面上的其他元素。而浮動元素的定位還是基於正常的文件流,然...

定位和浮動

能把元素定在螢幕的任意位置,該元素脫離文件流。什麼是文件流 文件流指的是元素排版布局過程中,元素會自動從左往右,自上而下的流式布局。一 relative 相對定位 相對定位的元素相對於自身偏移 相對定位的元素不會脫離文件流 二 absolute 絕對定位 使元素完全脫離文件流 相對於 static ...

浮動和定位

浮動 float float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象,使文字圍繞在影象周圍,不過在 css 中,任何元素都可以浮動。浮動元素會生成乙個塊級框,而不論它本身是何種元素。如果浮動非替換元素,則要指定乙個明確的寬度 否則,它們會盡可能地窄。注釋 假如在一行之上只有極少的空間可...