清除浮動的幾種方法

2021-07-14 08:38:25 字數 1068 閱讀 8747

當元素浮動時,他將不再處於普通文件流中,相當於浮在文件之上,不佔據空間,但是會縮短行寬,產生文字環繞的效果。

浮動帶來的影響:

1,父級的高度塌陷

2.背景不能顯示

3.變框不能撐開

4.margin值不能正確顯示

5.產生文字環繞的效果

6.由於脫離文件流,不佔位,而後面的元素未脫離文件流導致後面的元素被擋住

.box

.inner-box

style>

class="box fix">

class="inner-box">

div>

class="a">

div>

div>

body>

接下來我們為她清除浮動:

*第一種方法:對父級設定適當的高度,只建議高度固定的布局使用。

**省略;

*第二種方法:在結尾處加空div,利用css提高的clear:both清除浮動,讓父級div自動獲取到高度。

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

缺點:如果頁面浮動很多就會增加很多的空div,產生**冗餘,以前使用,現在不太推薦。

**如下;

.a

*第三種方式:父級div定義偽類after和zoom,原理與方法二類似,由於after只有ie8以上以及非ie瀏覽器才支援,zoom是ie專屬,所以,為了實現更好的相容性,需要兩者結合使用。

優點:瀏覽器相容性好

缺點:**較多,建議定義公共類以減少css**。

**如下:

.fix

:after

.fix

*第四種方式:父級定義overflow:hidden,相當於讓父級緊貼內容(包括使用float的div的盒子),注意【必須要定義寬度width,zoom:1,同時不能定義height】

優點:簡單,**少,瀏覽器相容性好

缺點:不能與position配合使用,因為超出的部分會隱藏

清除浮動的幾種方法

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

清除浮動的幾種方法

style float left 為了解決container容器高度塌陷問題,我們必須清除浮動 第一種方法 在container元素後加上乙個空的div標籤,然後給設定乙個clear both的樣式 第二種方法 給container容器新增 overflow auto hidden樣式 第三張方法 ...

清除浮動的幾種方法

當我們使用float後,發現父級元素沒有被撐開,通常情況下需要清除浮動,以下介紹三種清除浮動的方法 1.使用overflow hidden將元素變成bfc,即可清除內部浮動 box child style class box class child div class child div div b...