清除浮動的幾種方式

2022-08-29 04:51:07 字數 1088 閱讀 9268

不清除浮動會怎樣?

(1):背景不能顯示

(2):邊框不能撐開

(3):margin 設定值不能正確顯示

(4):下方內容往上移蓋住浮動區域的內容

html**:

<

div

class

="container"

>

<

div

class

="fl"

>

div>

<

div

class

="fr"

>

div>

div>

<

style

>

.fl.fr

style

>

方式一:

.container下,最後再加乙個div如下:

<

div

style

="clear: both;height: 0; line-height: 0; font-size: 0

">

div>

方式二:

給父元素.container新增樣式:

.container

方式三:

偽類清除浮動:after:

.container:after.container

方法四:

雙偽類清除浮動:

.container:before,.container:after .container

方式五:

展現為**,需設定寬度:

.container

方式六:

展現為內聯塊狀,需設定寬度:

.container

方式七:

超出隱藏,不推薦使用

.container

方式八:

給父元素定義高度,不推薦使用

.container

清除浮動的幾種方式

1.可以給父級元素設乙個高度,如果高度是固定的,這種方法 簡單,但是要給父級元素設成乙個固定的高度。2.可以在浮動的下面加乙個空的元素 clear both 3.給父元素定義乙個偽類 after或 before clear both,display block zoom 1 為了相容ie zoom ...

清除浮動的幾種方式

元素1 元素2元素3 元素4元素5元素6 1.方法一 給父元素設定乙個高度 但是這種方法不經常使用 box1 box1 items box2 box2 items items2.使用clear both 這種方法相對於第一種方法較為簡潔,但是會造成第二個盒子元素的margin top屬性無效。這種方...

清除浮動的幾種方式

清除浮動的四種方法 方法一 弊端 此時父元素高度自適應,但是左右外邊距auto失效,父元素靠左對齊 father 方法二 高度自適應的關鍵。auto的話ie6會產生滾動條 father 方法三 法,但ie6不相容 有其他問題 father after 方法四 空標籤法 所有瀏覽器都適用 最後加入乙個...