清楚浮動的幾種方法

2021-07-10 05:35:42 字數 736 閱讀 3217

清楚浮動的幾種方法

為什麼我們用float:left/right之後會對其父輩或兄弟元素產生影響:浮動框不在普通的文件流中,它脫離了文件流,所以包圍的內容的不佔據空間。如下面的**:

1221233

uriiot

rrr如何讓包圍的元素在視覺上包圍浮動元素呢?

1、在緊靠最後乙個浮動元素之後新增乙個空元素並清理浮動

。 1221233

uriiot

rrr2、對浮動元素的父輩元素進行浮動(這種方法會對父輩的後面的兄弟元素有影響)

1221233

uriiot

rrr3、使用overflow屬性(overflow:hidden、auto、overflow。(可是其會自動清理包含的任何浮動元素)

1221233

uriiot

rrr4、結合使用:after偽類。

1221233

uriiot

rrr5.overflow與zoom的結合使用;

1221233

uriiot

rrr6、overflow與width結合

1221233

uriiot

rrr

清楚浮動的幾種方法

標準流 盒子會各佔整行位置。子盒子若是標準流,父盒子雖然沒有高度,但是會撐開父盒子高度。浮動 盒子浮了起來,不會佔據原來的位置,若父盒子沒有定義高度,則不會撐開父盒子,父盒 子高度為0。浮動可以讓多個塊級元素在一行顯示,且塊與塊之間沒有空隙,但要注意給父盒子清除浮動,否則父盒子不會被撐開 清除浮動的...

清除浮動的幾種方法

1.浮動元素下加空div 為了統一樣式,我們新建乙個樣式選擇器class命名為 clear 並且對應選擇器樣式為 clear both 然後我們在父級 結束前加此div引入class clear 樣式。這樣即可清除浮動。這個class 清除float產生浮動,可以不用對父級設定高度 也無需技術父級高...

清除浮動的幾種方法

當元素浮動時,他將不再處於普通文件流中,相當於浮在文件之上,不佔據空間,但是會縮短行寬,產生文字環繞的效果。浮動帶來的影響 1,父級的高度塌陷 2.背景不能顯示 3.變框不能撐開 4.margin值不能正確顯示 5.產生文字環繞的效果 6.由於脫離文件流,不佔位,而後面的元素未脫離文件流導致後面的元...