CSS脫離文件流

2022-10-09 22:15:16 字數 485 閱讀 2973

脫離文件流

也就是將元素從普通的布局排版中拿走,其他盒子在定位的時候,會當做脫離文件流的元素不存在而進行定位。需要注意的是,使用float脫離文件流時,其他盒子會無視這個元素,但其他盒子內的文字依然會為這個元素讓出位置,環繞在周圍。其他盒子與其他盒子內的文字都會無視它。

float

如上圖 div2實際被div1遮蓋住了 我們可以將div2顯示出來

原因可看層疊上下文

div2的內容(文字及)依然為div1元素讓出位置,所以預設往下寫也就到了div3所在的區域,但是其文字寬度依然受到其父div的寬度顯示(2222連續寫如英文單詞一樣預設不會拆開,中文會拆開換行)

position:absolute

div2和其內容無視了div1

position:relative

relative只是基於其本身位置發生偏移,會保留其原來的位置

absolute是基於其父親(position元素)發生偏移,不保留原來的位置

CSS脫離文件流 浮動

什麼是文件流?將窗體從上至下分成一行一行,並在每行中按從左至右依次排放元素,稱為文件流,也稱為普通流。這個應該不難理解,html中全部元素都是盒模型,盒模型占用一定的空間,依次排放在html中,形成了文件流。什麼是脫離文件流?元素脫離文件流之後,將不再在文件流中佔據空間,而是處於浮動狀態 可以理解為...

float探索,脫離文件流?不脫離文件流?

float屬性是css2中的乙個屬性,很多時候我們都會用到她,但是通常只要一不小心就會遇到很多問題,跟設想的完全不一樣呀,怎麼回事?那麼這個時候我們應該冷靜下來好好探索一下這個屬性的用法,弄明白其原理,適用於什麼場景,這樣在任何情況下都能正確的使用她。最初,float是應用於影象,使文字環繞在其周圍...

CSS浮動框是否脫離文件流

css浮動框是否脫離文件流?block元素變成內聯 inline 元素有兩種方法 一 display inline 不過內聯元素不能設定寬和高,所以這種方法用的比較少 二 運用浮動屬性float left float right float none 預設值,元素不浮動,並會顯示在其在文字中出現的位...