float,absolute脫離文件流的總結

2022-02-03 14:31:16 字數 1584 閱讀 7511

dom元素脫離文件流,有如下幾種方式:

1. float

脫離文件流,其他dom元素無視他,在其下方布局,但是其未脫離文字流,其他元素的文字會認為他存在,環繞他布局。

父元素會無視他,因此無法獲取其高度,這也就是浮動元素父元素高度塌陷的原因。

下面是乙個例子:

特別注意的是,浮動元素後面元素的文字雖然對浮動元素形成環繞,但其位置依然受後面元素的寬高的影響。如果

後面元素的寬度過小,文字將不能在右側環繞,而是顯示在浮動元素下方。

>你好

div>

<

div

id="b"

>

第一,絕對定位與浮動的區別。絕對定位是將元素徹底從文件流刪除,並相對於其包含塊定位(包含塊可能是文件中的另乙個元素或者是初始包含塊),元素原先在正常文件流中所佔的空間會關閉,就好像該元素原來不存在一樣,該元素再也不會影響其他元素的布局了。如果對元素a使用絕對定位的話,元素b佔據元素a之前的位置,與元素a重合在一起,並被元素a覆蓋。如圖所示。

完全脫離文件流,其他元素無視他,在其下方布局

3. fixed

完全脫離文件流

4. relative

半脫離文件流,相對自身位置偏移,其自身位置還在,依然佔據文件流

參考:

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

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

SCUT J O 脫離地牢

time limit 1000ms memory limit 10000k 在乙個神秘的國度裡,年輕的王子paris與美麗的公主helen在一起過著幸福的生活。他們都隨身帶有一塊帶磁性的陰陽魔法石,身居地獄的魔王satan早就想得到這兩塊石頭了,只要把它們溶化,satan就能吸收其精華大增自己的魔力...

專案脫離SVN控制

讓專案脫離svn控制,主要是把專案各級子目錄下的.svn檔案刪除。windows 新建txt檔案 deletesvn.bat,內容如下 for r a in do if exist a svn rd s q a svn 儲存,放到專案根目錄下,執行 linux unix 新建指令碼 deletesv...