方法1:給父級div定義 高度
**如下:
我是左浮動
我是右浮動
我是div2
原理:通過設定父元素overflow值設定為hidden;在ie6中還需要觸發 haslayout(zoom:1)
優點:**簡介,不存在結構和語義化問題
缺點:無法顯示需要溢位的元素(亦不太推薦使用)
方法7父元素設定 overflow:auto;
原理:原理同方法6,在ie6中還需要觸發 haslayout(zoom:1)
優點:**簡介,不存在結構和語義化問題
缺點:firefox早期版本會無故產生focus,多個巢狀後,firefox某些情況會造成內容全選;ie中 mouseover 造成寬度改變時會出現最外層模組有滾動條等。
方法8:父級div定義 偽類:after 和 zoom
**如下:
我是左浮動
我是右浮動
我是div2
原理:ie8以上和非ie瀏覽器才支援:after,原理和方法2有點類似,zoom(ie轉有屬性)可解決ie6,ie7浮動問題
優點:結構和語義化完全正確,**量也適中,可重複利用率(建議定義公共類)
缺點:**不是非常簡潔(極力推薦使用)
本方法進益求精寫法
相對於空標籤閉合浮動的方法**似乎還是有些冗餘,通過查詢發現unicode字元裡有乙個「零寬度空格」,也就是u+200b,這個字元本身是不可見的,所以我們完全可以省略掉 visibility:hidden了
.clearfix:after
.clearfix 照顧ie6,ie7就可以了
wfuns.com
清除浮動的方法及優缺點
為什麼要清除浮動?下面的例子是浮動對元素的影響 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.浮動元素後面的同級非浮動元素會提高,...
CSS清除浮動的方法及優缺點
浮動是css布局裡面用的比較多的屬性。浮動的框向左或向右移動,直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。因為浮動會使當前元素產生向上浮的效果,所以浮動的元素會脫離正常的文件流,它包圍的內容在文件流中不佔空間。元素浮動會影響其他元素的布局,那麼浮動會帶來哪些影響呢?1.元素浮動後,父元素的背景...