最基本的浮動方式我們都知道,它是乙個半脫離文件流的方式,那麼為啥叫做半脫離文件流呢?接下來我們就來以例項來解釋一下
.box1這是第乙個div
答案,不用解釋,都懂,但從這點咱們是否能得出乙個結論,在沒有其它情況下,行內元素是覆蓋塊級元素的。
.box1答案:和上面第乙個一樣,因為第乙個用了浮動,脫離了文件流,使第二個div頂上去了,而浮動的元素將第二個div給覆蓋了。.box2
這是第乙個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元素無視他,在其下方布局,但是其未脫離文字流,其他元素的文字會認為他存在,環繞他布局。父元素會無視他,因此無法獲取其高度,這也就是浮動元素父元素高度塌陷的原因。下面是乙個例子 特別注意的是,浮動元素後面元素的文字雖然對浮動元...