為什麼設定了float的div會遮住第二個div,而當第二個div不是div而是p時卻不會被遮住,而是環繞在右邊?

時間 2021-05-07 01:03:47

1樓:

這些問題都可以直接找文件,看看float的定義:

CSS的float屬性可以使乙個元素脫離正常的文件流,然後被安放到它所在容器的的左端或者右端,並且其他的文字和行內元素環繞它。

2樓:張亞運

同學啊,我覺得標題打錯了,如果我沒猜錯,你應該是說「第乙個div會覆蓋第二個div」

先說「為什麼第乙個div會覆蓋第二個div」

這個好理解,兩個div都是塊元素,不浮動的話,兩個人是挨個豎著排。但是浮動元素脫離了普通流,所以呢,這個元素佔據的那個文件空間就空了,地價很貴不能浪費,第二個div,這個不浮動的元素就往上走了。然後浮動元素的層級比不浮動的元素層級高,所以呢,看起來就是浮動的第乙個div擋住了不浮動的第二個div。

再說「當第二個不是div而是文字時,卻不覆蓋,而是浮動在右邊」

這個說法也不對,先糾正一下再說為什麼。正確的現象描述是:當浮動元素相鄰的下乙個塊級元素包含文字內容時,浮動元素沒有覆蓋文字,而是浮動在文字的左邊。

其實,你在第二個div裡加點文字,和換成p加了個點文字,效果是一樣的,同樣表現為第乙個div浮在文字左邊,而且這樣說不定更有利於你理解,因為第二個div的背景顏色確實被第乙個div蓋住了,但文字卻沒有。

這個怎麼說呢,這個塊級元素裡的文字啊,那麼一行一行的分別有乙個行框,行框這貨可以理解為父元素寬度和本行最高行高元素的高度確定的矩形。這個例子裡,塊級元素裡面就是文字,這些文字沒有標籤包裹,行內框的寬度也就無從說起,所以行框就是父元素的寬度了,如果是那個p的話,就是100%了。浮動元素不佔據文件空間,但是是佔據行框這個空間的。

所以第乙個div被float:left以後,下面的元素跑上來以後,裡面的文字的行框左側是被佔據了第乙個div寬度那麼寬的位置的,所以文字就只能待在這個浮動元素的右邊了。。。

[注:行框的表述不一定準確哦,欲知詳情,敬請搜尋。。。]

哎,這個好難表達,不知道我說明白沒有。。。

在不設定 Div 元素的寬度(width)的情況下,如何讓 Div 元素居中?

第一種方法 外層設定相對定位且浮動,left 50 這樣左邊位置就偏移到了中間的位置 然後內層設定相對定位,left 50 這樣正好向左偏移自身寬度的一半,實現了居中。第二種辦法 外層使用text align center 我們知道text align center是讓裡面的內聯元素居中,很顯然在外...

Android 程式設計中,為什麼設定了 Intent FLAG ACTIVITY NEW TASK,兩個 Activity 取出來的任務 ID 還是相同的?

audientlin 按照我的理解 如果設定了Intent.FLAG ACTIVITY NEW TASK,意思就是在新的Task中啟動Activity,那麼問題來了,新的Task是叫什麼呢?所以就會去Manifest中找這個Activity對應的taskAffinity是什麼,如下 我這裡設定了 a...

火狐下,為什麼設定了height 100 之後再設定padding bottom沒有效果了

padding效果被元素高度影響了 你要知道高度的百分比並非任何時候都是乙個有效值 比如某個元素的父元素沒有設定高度有效值,父元素用百分比,父元素的父元素也是百分比,子元素按照百分比計算高度,不同的瀏覽器處理結果不一樣 如果父元素設定固定高度 height 100px,子元素height 40 結果...