關於浮動的半脫離文件流的理解

2022-04-04 19:27:45 字數 697 閱讀 6681

最基本的浮動方式我們都知道,它是乙個半脫離文件流的方式,那麼為啥叫做半脫離文件流呢?接下來我們就來以例項來解釋一下

.box1

這是第乙個div

答案,不用解釋,都懂,但從這點咱們是否能得出乙個結論,在沒有其它情況下,行內元素是覆蓋塊級元素的

.box1

.box2

這是第乙個div

這是第二個div

答案:和上面第乙個一樣,因為第乙個用了浮動,脫離了文件流,使第二個div頂上去了,而浮動的元素將第二個div給覆蓋了。

這裡,我們得出第二個結論:浮動元素也是覆蓋塊級元素的。

第三個例項

.box1

div之前的文字這是第乙個div

div之後的文字

你會發現,浮動元素它無法覆蓋文字,因此得出第三個結論:內聯元素是能覆蓋浮動元素的。因此,浮動元素是處在內聯元素和塊級元素之間的,所以被叫做半脫離文件流狀態

CSS脫離文件流 浮動

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

CSS浮動框是否脫離文件流

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

float,absolute脫離文件流的總結

dom元素脫離文件流,有如下幾種方式 1.float 脫離文件流,其他dom元素無視他,在其下方布局,但是其未脫離文字流,其他元素的文字會認為他存在,環繞他布局。父元素會無視他,因此無法獲取其高度,這也就是浮動元素父元素高度塌陷的原因。下面是乙個例子 特別注意的是,浮動元素後面元素的文字雖然對浮動元...