清除浮動的的常用方法

2022-09-01 02:06:11 字數 1259 閱讀 7796

第一種:在末尾處新增新的元素,應用clear:both

123

原理:新增乙個空div,利用css提高的clear:both清除浮動,讓父級div能自動獲取到高度 

優點:簡單、**少、瀏覽器支援好、不容易出現怪問題 

缺點:不少初學者不理解原理;如果頁面浮動布局多,就要增加很多空div,讓人感覺很不好 

建議:不推薦使用,但此方法是以前主要使用的一種清除浮動方法 

第二種:給父級元素定義overflow

left

right

div2

原理:必須定義width或zoom:1,同時不能定義height,使用overflow:hidden時,瀏覽器會自動檢查浮動區域的高度 

優點:簡單、**少、瀏覽器支援好 

缺點:不能和position配合使用,因為超出的尺寸的會被隱藏。 

建議:只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。 

第三種:父級div定義 偽類:after 和 zoom

left

right

div2

原理:ie8以上和非ie瀏覽器才支援:after,原理和方法2有點類似,zoom(ie轉有屬性)可解決ie6,ie7浮動問題 

其中clear:both;指清除所有浮動;content: '.'; display:block;對於ff/chrome/opera/ie8不能缺少,其中content()可以取值也可以為空。visibility:hidden;的作用是允許瀏覽器渲染它,但是不顯示出來,這樣才能實現清楚浮動。

下一標籤直接清浮動兄弟標籤浮動時,在下一標籤的屬性中直接寫入清除clear:both;這樣就可以清除以上標籤的浮動而不用加入空標籤來清除浮動。

第四種:父級div定義 overflow:auto

left

right

div2

原理:必須定義width或zoom:1,同時不能定義height,使用overflow:auto時,瀏覽器會自動檢查浮動區域的高度 

優點:簡單、**少、瀏覽器支援好 

缺點:內部寬高超過父級div時,會出現滾動條。 

建議:不推薦使用,如果你需要出現滾動條或者確保你的**不會出現滾動條就使用吧。 

清除浮動的常用方法

先說不清除浮動的效果 給父元素這只邊框都不會把他們包裹起來,俗稱高度塌陷。然後說說幾個不常用的清除浮動方法,比如 style overflow hidden style float left div style float left div div 就是給父元素設定overflow屬性的那種,具體樣...

清除浮動的常用方法

1.給浮動元素父級設定高度 2.在最後乙個浮動標籤後,新加乙個標籤,將其樣式設定為 clear both 3.在父級元素新增樣式 overflow hidden 此方法會將多出的內容裁切掉,無法顯示要溢位的元素 4.使用before和after雙偽元素清除浮動,使用偽元素清除浮動必須是塊級元素上使用...

清除浮動的常用方法

方法一 對收到影響的元素進行設定,哪側受到浮動的影響就清除哪側,clear both clear left clear right 方法二 同時設定100 或固定寬度 overflow hidden 嘗試一下 如何使得p標籤內容跟div標籤的不同一行呢?doctype html html lang ...