那些年我們一起清除過的浮動

2021-09-06 13:12:17 字數 4667 閱讀 6138

什麼是浮動？

原理：在css中使用float:left和float:right,使元素脫離文件流。同時顯示為類似display:inline-block的形式（可以定義寬高，但是又不會換行）。最大好處是相比於之前的table布局的，更具有靈活性。

不清除浮動會產生什麼後果？

比如 我想要如下這樣的布局效果:

html**可以如下寫：

<


div 


class


="div1"


>


<


div 


class


="left"


>left


div>


<


div 


class


="right"


>right


div>


div>


<


div 


class


="div2"


>div2


div>
css**如下：

.div1.div2.left.right
但是由於有浮動產生，我們沒有清除浮動，所以會產生如下後果：如下圖所示：

也就是說 沒有清除浮動 會使我們的布局變亂。

清除浮動的方法有哪些？

1.父級元素定高度。

還是上面的html**：

<


div 


class


="div1"


>


<


div 


class


="left"


>left


div>


<


div 


class


="right"


>right


div>


div>


<


div 


class


="div2"


>div2


div>
css**如下：

.div1.div2.left.right
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。

優點：簡單，**少，容易掌握

缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題.

2.新增額外的標籤。

html**如下：

<


div 


class


="div1"


>


<


div 


class


="left"


>left


div>


<


div 


class


="right"


>right


div>


<


div 


class


="clearfloat"


>


div>


div>


<


div 


class


="div2"


>div2


div>
css**如下：

.div1.div2.left.right.clearfloat
原理：新增乙個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度

優點：簡單，**少，瀏覽器支援好，不容易出現怪問題

缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，**語義化變差。

3.父元素設定overflow:hidden

通過設定父元素overflow值設定為hidden；在ie6中還需要觸發 haslayout ，例如 zoom：1；

zoom的使用方法：

zoom :normal|numbernormal:　

預設值。使用物件的實際尺寸number:　

百分數 | 無符號浮點實數。浮點實數值為1.0或百分數為100%時相當於此屬性的 normal 值 用白話講解就是zoom:後面的數字即放大的倍數，可以是數值，也可以是百分比。如：zoom:1，zoom:120%。 而這個屬性只要在ie中才起作用，所以很少用到它的實際用途，而最經常用到作用是清除浮動等。

html**如下：

<


div 


class


="div1"


>


<


div 


class


="left"


>left


div>


<


div 


class


="right"


>right


div>


div>


<


div 


class


="div2"


>div2


div>
css可以寫成如下**：

.div1.div2.left.right
優點：不存在結構和語義化問題，**量極少。

缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素；

4.父元素設定 overflow：auto 屬性

同樣ie6需要觸發haslayout，演示和3差不多

優點：不存在結構和語義化問題，**量極少

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

5. 父元素也設定浮動。

html**如下：

<


div 


class


="div1"


>


<


div 


class


="left"


>left


div>


<


div 


class


="right"


>right


div>


div>


<


div 


class


="div2"


>div2


div>
css**如下：

.div1.div2.left.right
6.父元素設定display:table

html**如下：

<


div 


class


="div1"


>


<


div 


class


="left"


>left


div>


<


div 


class


="right"


>right


div>


div>


<


div 


class


="div2"


>div2


div>
css**如下：

.div1.div2.left.right
原理：將div屬性變成**

優點：結構語義化完全正確，**量極少

7.使用:after 偽元素

html**如下：

<


div 


class


="div1 clearfloat"


>


<


div 


class


="left"


>left


div>


<


div 


class


="right"


>right


div>


div>


<


div 


class


="div2"


>div2


div>
css**如下：

.div1.div2.left.right.clearfloat:after.clearfloat
由於ie6-7不支援:after，使用 zoom:1觸發 haslayout。

優點：結構和語義化完全正確

缺點：復用方式不當會造成**量增加。

總之：都有優點和缺點 具體的情況具體分析。我目前一般都用overflow:hidden來解決浮動 到目前為止還沒有碰到什麼問題。

那些年我們一起清除的浮動

方法一 after main warp自己閉合浮動了，所以footer不用再清除浮動了 float left side 我也浮動了 float left 為了建立跨瀏覽器相容的同樣的盒模型布局，我們可以把原來的清除浮動的方法改良一下，採用偽類 before 和 after clearfix befo...

那些年我們office 那些年我們一起吃過的桑葉泡

五一放假，和弟弟一起回了老家，回家之後立馬拿著小籃子出門，去尋覓讓我心心念念的桑葉泡，這個季節正是它們成熟的時候。桑葉泡是我們家這邊的叫法，其實它還有很多的別稱，比如桑葚 桑椹 桑椹子 桑蔗 桑棗 桑果 桑泡兒，桑椹等其性味甘寒，具有補肝益腎 生津潤燥 烏髮明目 利尿保健 消暑等功效。但我們吃它並不...

那些年我們一起追的前端

此博文有毒，慎點！陽光夾雜著微風滲進了屋內，輕撫著坐在工位上的我，而此時的我是心懷愧疚的，因為我正在寫著一篇不那麼像技術文章的技術文章，而且還變成了赤裸裸的標題黨.對於此，我只能懇求您暫時收起板磚，容我慢慢道來，向您訴說這文章由來的前因，說完了，再拍我也不遲 時光如梭，轉眼間三個月過去.a很榮幸的接...