談談常用清除浮動的方法

2021-09-07 08:20:53 字數 638 閱讀 1905

我們在做頁面布局的時候,經常需要利用浮動來實現一些布局效果,這樣帶來的後果就會導致父元素丟失寬度。今天我們就來說說『找回『寬度的方法。

而清除浮動後的效果應該是這樣的請看:

下面就說說方法,方法其實有非常的多,下面部分方法的截圖請大家參考

(1)父級div定義height。

(2)結尾處加空div標籤clear:both。

(3)父級div定義偽類:after和zoom。

(4)父級div定義overflow:hidden。

(5)父級div定義overflow:auto。

(6)父級div也浮動,需要定義寬度。

(7)父級div定義display:table。

(8)結尾處加br標籤clear:both

一般來說 給父元素加偽元素after是更好的方法。附圖一張:

(新手請多多指教)

清除浮動的常用方法

先說不清除浮動的效果 給父元素這只邊框都不會把他們包裹起來,俗稱高度塌陷。然後說說幾個不常用的清除浮動方法,比如 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 ...