清除浮動的八種方式

2021-08-22 07:14:16 字數 548 閱讀 7730

1,在同級浮動元素的背後加乙個空的div,設定屬性clear:both;

2 ,給父元素加高度,解決了父級div無法自動獲得高度的問題,但是這種限制了相容性的問題,而且子元素高度必須和父元素一樣,不然會出錯

3,overflow:hiddent   瀏覽器會自動檢查浮動區域的高度;

4,父級div定義 偽類:after 和 zoom 

.clearfloat:after 

.clearfloat 

clearfix:before,.clearfix:after

.clearfix:after

.clearfix

5 ,父級div定義 overflow:auto 必須定義width或zoom:1,同時不能定義height

6:父級div 也一起浮動 

7 父級div定義 display:table    原理:將div屬性變成** 

8結尾處加 br標籤 clear:both     原理: 父級div定義zoom:1來解決ie浮動問題,結尾處加 br標籤 clear:both 

可參考:

css清除浮動的種方式

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

清除浮動的4種方式

css的三種定位機制 文件流,浮動,定位 html,相當重要的概念,在網頁中,標籤從上至下,從左至右,比方塊級元素,行內元素的預設排序我們稱之為普通流。這種布局方式稱之為普通流布局 浮動最早是用來控制,以便達到其他元素 特別是文字 實現 環繞 的效果。後來,發現浮動可以讓任何盒子同一行顯示,漸漸偏離...

清除浮動的4種方式

清除浮動主要是為了解決,父元素因為子級元素浮動引起的內部高度為0的問題 如下 給父盒子設定乙個boder,內部放兩個盒子乙個big 乙個small,未給big和small設定浮動,則他們會預設撐開父盒子。當我給內部兩個盒子加上float屬性的時候 底部的footer盒子就會頂上來,然後父盒子因為沒設...