浮動清除方法大全及優缺點解析

2022-04-16 19:45:00 字數 3749 閱讀 1987

對於乙個web前端工程師來說浮動清除是我們的必修課,如何精益求精將**寫到極致,小編覺得我們必須花時間多對比、多揣摩。遍搜網路,清除浮動的方法大致有一以下幾種方法:

方法1:給父級div定義 高度

**如下:

1

<

style

type

=」text/css」

>

2.div1

3.div2

4.left

5.right

6< /style>

<

div

class

=」div1″

>

<

div

class

=」left」

>我是左浮動

div>

<

div

class

=」right」

>我是右浮動

div>

div>

<

div

class

=」div2″

>我是div2

div>

原理:給父級div定義固定高度(height),能解決父級div 無法獲取高度得問題。

優點:**簡潔

缺點:高度被固定死了,是適合內容固定不變的模組。(不推薦使用)

方法2:div閉合處,加

(.clear)

**如下:

1

<

div

class

=」div1″

>

2<

div

class

=」left」

>我是左浮動

div>

3<

div

class

=」right」

>我是右浮動

div>

4<

div

class

=」clear」

>

div>

5div

>

6<

div

class

=」div2″

>我是div2

div>

原理:新增一對空的div標籤,利用css的clear:both屬性清除浮動,讓父級div能夠獲取高度。

優點:瀏覽器支援好

缺點:多出了很多空的div標籤,如果頁面中浮動模組多的話,就會出現很多的空置div了,這樣感覺視乎不是太令人滿意。(不推薦使用)

方法3:結尾處加 br標籤

(.clear)

**如下:

1

<

div

class

=」div1″

>

2<

div

class

=」left」

>我是左浮動

div>

3<

div

class

=」right」

>我是右浮動

div>

4<

br class

=」clear」

/>

5div

>

6<

div

class

=」div2″

>我是div2

div>

原理及有優缺點同方法2,可做了解,亦不推薦使用。

方法4:讓父級div 也一併浮起來

這樣做可以初步解決當前的浮動問題。但是也讓父級浮動起來了,又會產生新的浮動問題。 不推薦使用

方法5:父級div定義 display:table

方法6父元素設定 overflow:hidden;

1

<

style

type

=」text/css」

>

2.div1

3.div2

4.left

5.right

6style

>78

<

div

class

=」div1″

>

9<

div

class

=」left」

>我是左浮動

div>

10<

div

class

=」right」

>我是右浮動

div>

11div

>

12<

div

class

=」div2″

>我是div2

div>

原理:通過設定父元素overflow值設定為hidden;在ie6中還需要觸發 haslayout(zoom:1)

優點:**簡介,不存在結構和語義化問題

缺點:無法顯示需要溢位的元素(亦不太推薦使用)

方法7父元素設定 overflow:auto;

原理:原理同方法6,在ie6中還需要觸發 haslayout(zoom:1)

優點:**簡介,不存在結構和語義化問題

缺點:firefox早期版本會無故產生focus,多個巢狀後,firefox某些情況會造成內容全選;ie中 mouseover 造成寬度改變時會出現最外層模組有滾動條等。

方法8:父級div定義 偽類:after 和 zoom

**如下:

1

<

style

type

=」text/css」

>

2.div1

3.div2

4.left

5.right

6.clearfix:after

7.clearfix

8style

>910

<

div

class

=」div1

clearfix」

>

11<

div

class

=」left」

>我是左浮動

div>

12<

div

class

=」right」

>我是右浮動

div>

13div

>

14<

div

class

=」div2″

>我是div2

div>

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

優點:結構和語義化完全正確,**量也適中,可重複利用率(建議定義公共類)

缺點:**不是非常簡潔(極力推薦使用)

本方法進益求精寫法

相對於空標籤閉合浮動的方法**似乎還是有些冗餘,通過查詢發現unicode字元裡有乙個「零寬度空格」,也就是u+200b,這個字元本身是不可見的,所以我們完全可以省略掉 visibility:hidden了

.clearfix:after

.clearfix 照顧ie6,ie7就可以了

清除浮動方法及優缺點

方法1 給父級div定義 高度 如下 我是左浮動 我是右浮動 我是div2 原理 通過設定父元素overflow值設定為hidden 在ie6中還需要觸發 haslayout zoom 1 優點 簡介,不存在結構和語義化問題 缺點 無法顯示需要溢位的元素 亦不太推薦使用 方法7父元素設定 overf...

清除浮動的方法及優缺點

為什麼要清除浮動?下面的例子是浮動對元素的影響 lang en charset utf 8 type text css box1 box2 box3 style head class box1 class box2 p div class box3 div body html box2加入float...

CSS清除浮動方法及優缺點分析

一 什麼是浮動 通過設定元素的float值不為none,使得元素按照特定的方向脫離文件流,不佔據空間。浮動元素碰到包含它的父元素的邊框或者浮動元素的邊框停留。設定浮動後的行內元素,可以設定其寬和高。二 浮動帶來的問題 div1 div2 1.父元素的高度塌陷 2.浮動元素後面的同級非浮動元素會提高,...