清除浮動最簡單的兩種方式

2022-03-25 06:28:11 字數 470 閱讀 8553

總結一下,使用float的話,需要清除浮動的兩種簡單方式:

1.通過偽元素

測試1測試2

測試3123

通過偽元素是自我感覺質量比較高的清除浮動的一種方式,因為不再向dom中新增元素

其是通過sass和less開發中,清除浮動在重複性使用中會變得格外輕鬆:

%clearfix

&::after

}.box7

編譯後結果:

.box7 

.box7::after, .box7::before

.box7::after

上面這段**如果沒有接觸sass的小夥伴可以直接忽略:)

2.通過標籤

定義乙個class標籤: 

css部分需要新增:

.clearfix

清除浮動float的兩種常用方法

一 原頁面布局 1 html 2 css樣式 box left right bottom 3 頁面顯示效果 二 為了使class為bottom的div正常顯示在父級div的底部,需要新增屬性clear both 1 清除浮動的第一種方法 直接給class為bottom的div新增clear box ...

清除浮動的八種方式

1,在同級浮動元素的背後加乙個空的div,設定屬性clear both 2 給父元素加高度,解決了父級div無法自動獲得高度的問題,但是這種限制了相容性的問題,而且子元素高度必須和父元素一樣,不然會出錯 3,overflow hiddent 瀏覽器會自動檢查浮動區域的高度 4,父級div定義 偽類 ...

css清除浮動的種方式

我們在使用float浮動進行布局的時候知道一般需要給浮動的塊元素加上乙個父級元素,這樣元素浮動時才可以在父元素內部按照我們需要的方式進行布局,但是有乙個問題是如果父元素沒有給定高度的話當內部元素進行浮動之後父元素的高度就會是0,這是因為浮動的元素是處於標準流之外的。若是在一開始給定父元素乙個高度的話...