元素浮動與清除浮動

2021-10-09 22:44:59 字數 2302 閱讀 6102

我們知道,塊元素具有的特點是具有完整的盒模型和自己佔一行。當我們想讓多個塊元素同佔一行時,我們通常使用的方法除了利用display屬性之外,還可以利用float屬性,使其浮動,達到同佔一行的效果。

float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象,使文字圍繞在影象周圍,不過在 css 中,任何元素都可以浮動。浮動元素會生成乙個塊級框,而不論它本身是何種元素。

比如我們先對頁面中新增三個div,對他們分別定義如下樣式

.d1

.d2.d3

這時由於塊元素的特性,它們每個各佔一行。

現在我們同時給他們定義float: left;。這樣,它們就獨佔一行了。顯然,我們為該屬性定義的left定義了元素向左浮動。對於浮動,我們可以簡單地理解為元素向上漂浮了起來,浮動到了同一行。而且浮動後的排列順序和原來的一樣。

根據float屬性的定義我們知道任何元素都可以浮動。我們先來為列表元素定義浮動。

css

ul

ul .item

html

>

class

="item"

>

1li>

class

="item"

>

2li>

class

="item"

>

3li>

class

="item"

>

4li>

ul>

到這裡得到的效果還和我們預想的一樣,但當我們檢查頁面元素時會發現,明明子元素li還擁有正常的高度,父元素ul的高度卻為0。這是我們使用浮動的乙個被動效果。

要知道,在沒有明確地定義前,父元素的高度是靠子元素的高度撐起來的。而且元素浮動會使元素脫離文件流。我們前面說了,元素浮動我們可以假想為它們上浮了,上浮了某種層面上來說子元素與父元素就不在同一平面上了,當然也就沒辦法撐開父元素的高度。

這時我們就需要去清除浮動了。這並不是指取消浮動效果,而是取消浮動的會使父元素丟失高度的被動效果。

這時我們可以利用clear屬性。該屬性定義了元素的哪邊上不允許出現浮動元素。在 css1 和 css2 中,這是通過自動為清除元素(即設定了 clear 屬性的元素)增加上外邊距實現的。

我們一般清除浮動使用兩種方法。

(一)額外新增標籤

我們前面已經定義了列表元素向左浮動,現在我們在列表的末尾新建乙個div元素,僅定義clear:left屬性。

注意,此時的div不能定義float屬性。最好也不要定義寬高,因為定義後父元素的高度就是被div給撐開的。而且clear定義的方向與float定義的方向相同。

這時我們發現父元素ul的高度恢復為子元素的高度了。

clear的原理其實是讓父元素的盒子閉合出入口,阻止子元素溢位。而子元素一般是由float的方向溢位的,因此我們clear的方向應與float的方向相同以達到阻止子元素溢位的作用。

(二)利用偽元素清除浮動

偽元素其實我們可以理解為建立了乙個虛假的元素,插入在指定元素的相對的某位置。::before::after偽元素我們就可以理解為插在某元素前/後的幽靈元素。它在html中不存在,但在頁面中可以擁有真實實體。

對偽元素我們需要定義content屬性,該屬性定義了偽元素在頁面中的文字內容。

css

p::before

p::after

html

>

段落p>

這就是偽元素的功能。不過如果你不想讓偽元素內的內容顯示,可以使用visibility屬性,使其為hidden。

關於利用偽元素清除浮動,我們需為父元素新增偽類::after,並定義clear:both,即可清除浮動。當然也可以同時設定::before::after偽元素並定義clear:both

因為清除浮動需要在浮動元素後面,所以不可以使用 :before ,對 :after 設定 content:"" ,並使其 display:block 成為塊級元素後 clear:both 來清除浮動

css

ul

ul .item

ul::after

浮動與清除浮動

left 元素向左浮動。right 元素向右浮動。none 預設值。元素不浮動,並會顯示在其在文字中出現的位置。浮動的特性 浮動元素會從普通文件流中脫離,但浮動元素影響的不僅是自己,它會影響周圍的元素對齊進行環繞。不管乙個元素是行內元素還是塊級元素,如果被設定了浮動,那浮動元素會生成乙個塊級框,可以...

浮動與清除浮動

為元素設定了浮動之後,元素就會脫離文件流 可以看做是漂浮在文件流之上 存在。所有產生了浮動流的元素,塊級元素看不到它們。產生了bfc的元素和文字類屬性 inline 的元素以及文字都能看到浮動元素。如何觸發乙個盒子的bfc?position absolute float left right dis...

浮動與清除浮動

浮動布局是一種常見的布局方式,最初的使用目的是進行 的混排 清除浮動 浮動的使用場景 浮動通過css定義 div1 浮動可以取的值 none 預設 left right 當元素進行左浮動或者右浮動之後會脫離文件流,並且構成乙個浮動流,會覆蓋在沒有浮動的元素上,並且允許文字和內聯元素環繞在它周圍 浮動...