CSS偽類使得我們可以在特定的選擇器上,應用樣式到元素上,而不是基于它們在文檔樹中的位置。其中,偽類可以在目標元素處于特定狀態時,為其增加樣式。
對于清浮操作,我們可以使用CSS偽類:after和:before來實現。這兩個偽類可以創建一個空元素,我們可以利用這個空元素來在我們的樣式表中創建清浮效果。
.my-box { overflow: hidden; position: relative; } .my-box:after { content: ""; display: block; clear: both; visibility: hidden; height: 0; }
如上述代碼所示,我們首先為我們的容器元素添加了一個overflow:hidden屬性,這是非常關鍵的,因為它使得我們的容器元素可以始終保持高度,并將容器的尺寸擴展到內部浮動元素的最大高度。接下來,我們使用:after偽類為容器元素創建了一個包含空內容的塊級元素,并且將該元素的clear屬性設置為both,從而使其在容器內部將所有浮動元素都清除出去。
在實現浮動清除過程中,我們還可以使用另一個偽類:hover:以達到鼠標懸停時清浮操作的效果。而且,我們也可以使用JavaScript來實現這個功能。但是,在大多數情況下,使用CSS偽類來清除浮動是最佳的選擇。
上一篇css 偽類插入圖片