[轉(zhuǎn)]CSS清除浮動的8種方法

1、父級div定義 height

<style type="text/css">
     .div1{background:#000020;border:1px solid red;/*解決代碼*/height:200px;}
     .div2{background:#202020;border:1px solid red;height:100px;margin-top:10px}
     .left{float:left;width:20%;height:200px;background:#DDD}
     .right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
     <div class="left">Left</div>
     <div class="right">Right</div>
</div>
<div class="div2">
     div2
</div> 

原理:父級div手動定義height胳挎,就解決了父級div無法自動獲取到高度的問題饼疙。
優(yōu)點:簡單、代碼少慕爬、容易掌握窑眯。
缺點:只適合高度固定的布局,要給出精確的高度医窿,如果高度和父級div不一樣時磅甩,會產(chǎn)生問題。
建議:不推薦使用姥卢,只建議高度固定的布局時使用卷要。

2、結(jié)尾處加空div標(biāo)簽 clear:both

<style type="text/css">
   .div1{background:#000020;border:1px solid red}
   .div2{background:#202020;border:1px solid red;height:100px;margin-top:10px}
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   /*清除浮動代碼*/
   .clearfloat{clear:both}
</style>
<div class="div1">
   <div class="left">Left</div>
   <div class="right">Right</div>
   <div class="clearfloat"></div>
</div>
<div class="div2">
   div2
</div> 

原理:添加一個空div独榴,利用css提高的clear:both清除浮動僧叉,讓父級div能自動獲取到高度。
優(yōu)點:簡單棺榔、代碼少瓶堕、瀏覽器支持好、不容易出現(xiàn)怪問題掷豺。
缺點:不少初學(xué)者不理解原理捞烟;如果頁面浮動布局多薄声,就要增加很多空div,讓人感覺很不好题画。
建議:不推薦使用默辨,但此方法是以前主要使用的一種清除浮動方法。

3苍息、父級div定義 偽類:after 和 zoom

<style type="text/css">
   .div1{background:#000020;border:1px solid red;}
   .div2{background:#202020;border:1px solid red;height:100px;margin-top:10px}
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   /*清除浮動代碼*/
   .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
   .clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
   <div class="left">Left</div>
   <div class="right">Right</div>
</div>
<div class="div2">
   div2
</div> 

原理:IE8以上和非IE瀏覽器才支持:after缩幸,原理和方法2有點類似,zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題竞思。
優(yōu)點:瀏覽器支持好表谊、不容易出現(xiàn)怪問題(目前:大型網(wǎng)站都有使用,如:騰迅盖喷,網(wǎng)易爆办,新浪等等)。
缺點:代碼多课梳、不少初學(xué)者不理解原理距辆,要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持。
建議:推薦使用暮刃,建議定義公共類跨算,以減少CSS代碼。

4椭懊、父級div定義 overflow:hidden

<style type="text/css">
   .div1{background:#000020;border:1px solid red;/*解決代碼*/width:98%;overflow:hidden}
   .div2{background:#202020;border:1px solid red;height:100px;margin-top:10px;width:98%}
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
   <div class="left">Left</div>
   <div class="right">Right</div>
</div>
<div class="div2">
   div2
</div> 

原理:必須定義width或zoom:1诸蚕,同時不能定義height,使用overflow:hidden時氧猬,瀏覽器會自動檢查浮動區(qū)域的高度背犯。
優(yōu)點:簡單、代碼少狂窑、瀏覽器支持好媳板。
缺點:不能和position配合使用,因為超出的尺寸的會被隱藏泉哈。
建議:只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用蛉幸。

5、父級div定義 overflow:auto

<style type="text/css">
   .div1{background:#000020;border:1px solid red;/*解決代碼*/width:98%;overflow:auto}
   .div2{background:#202020;border:1px solid red;height:100px;margin-top:10px;width:98%}
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
   <div class="left">Left</div>
   <div class="right">Right</div>
</div>
<div class="div2">
   div2
</div> 

原理:必須定義width或zoom:1丛晦,同時不能定義height奕纫,使用overflow:auto時,瀏覽器會自動檢查浮動區(qū)域的高度烫沙。
優(yōu)點:簡單匹层、代碼少、瀏覽器支持好。
缺點:內(nèi)部寬高超過父級div時升筏,會出現(xiàn)滾動條撑柔。
建議:不推薦使用,如果你需要出現(xiàn)滾動條或者確保你的代碼不會出現(xiàn)滾動條就使用吧您访。

6铅忿、父級div 也一起浮動

<style type="text/css">
   .div1{background:#000020;border:1px solid red;/*解決代碼*/width:98%;margin-bottom:10px;float:left}
   .div2{background:#202020;border:1px solid red;height:100px;width:98%;/*解決代碼*/clear:both}
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
   <div class="left">Left</div>
   <div class="right">Right</div>
</div>
<div class="div2">
   div2
</div> 

原理:所有代碼一起浮動,就變成了一個整體灵汪。
優(yōu)點:沒有優(yōu)點檀训。
缺點:會產(chǎn)生新的浮動問題。
建議:不推薦使用享言,只作了解峻凫。

7、父級div定義 display:table

<style type="text/css">
   .div1{background:#000020;border:1px solid red;
    /*解決代碼*/width:98%;display:table;margin-bottom:10px;}
   .div2{background:#202020;border:1px solid red;height:100px;width:98%;}
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
   <div class="left">Left</div>
   <div class="right">Right</div>
</div>
<div class="div2">
   div2
</div> 

原理:將div屬性變成表格览露。
優(yōu)點:沒有優(yōu)點荧琼。
缺點:會產(chǎn)生新的未知問題。
建議:不推薦使用肛循,只作了解铭腕。

8银择、結(jié)尾處加 br標(biāo)簽 clear:both

<style type="text/css">
   .div1{background:#000020;border:1px solid red;margin-bottom:10px;zoom:1}
   .div2{background:#202020;border:1px solid red;height:100px}
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   .clearfloat{clear:both}
</style>
<div class="div1">
   <div class="left">Left</div>
   <div class="right">Right</div>
<br class="clearfloat" />
</div>
<div class="div2">
   div2
</div> 

原理:父級div定義zoom:1來解決IE浮動問題多糠,結(jié)尾處加 br標(biāo)簽 clear:both。
建議:不推薦使用浩考,只作了解夹孔。

原文鏈接:http://www.w3cfuns.com/notes/27495/5c4b42c07070e566383c631ee275fb2b.html

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市析孽,隨后出現(xiàn)的幾起案子搭伤,更是在濱河造成了極大的恐慌,老刑警劉巖袜瞬,帶你破解...
    沈念sama閱讀 212,542評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件怜俐,死亡現(xiàn)場離奇詭異,居然都是意外死亡邓尤,警方通過查閱死者的電腦和手機(jī)拍鲤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,596評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來汞扎,“玉大人季稳,你說我怎么就攤上這事〕浩牵” “怎么了景鼠?”我有些...
    開封第一講書人閱讀 158,021評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長痹扇。 經(jīng)常有香客問我铛漓,道長溯香,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,682評論 1 284
  • 正文 為了忘掉前任浓恶,我火速辦了婚禮逐哈,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘问顷。我一直安慰自己昂秃,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,792評論 6 386
  • 文/花漫 我一把揭開白布杜窄。 她就那樣靜靜地躺著肠骆,像睡著了一般。 火紅的嫁衣襯著肌膚如雪塞耕。 梳的紋絲不亂的頭發(fā)上蚀腿,一...
    開封第一講書人閱讀 49,985評論 1 291
  • 那天,我揣著相機(jī)與錄音扫外,去河邊找鬼莉钙。 笑死,一個胖子當(dāng)著我的面吹牛筛谚,可吹牛的內(nèi)容都是我干的磁玉。 我是一名探鬼主播,決...
    沈念sama閱讀 39,107評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼驾讲,長吁一口氣:“原來是場噩夢啊……” “哼蚊伞!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起吮铭,我...
    開封第一講書人閱讀 37,845評論 0 268
  • 序言:老撾萬榮一對情侶失蹤时迫,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后谓晌,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體掠拳,經(jīng)...
    沈念sama閱讀 44,299評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,612評論 2 327
  • 正文 我和宋清朗相戀三年纸肉,在試婚紗的時候發(fā)現(xiàn)自己被綠了溺欧。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,747評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡毁靶,死狀恐怖胧奔,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情预吆,我是刑警寧澤龙填,帶...
    沈念sama閱讀 34,441評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響岩遗,放射性物質(zhì)發(fā)生泄漏扇商。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,072評論 3 317
  • 文/蒙蒙 一宿礁、第九天 我趴在偏房一處隱蔽的房頂上張望案铺。 院中可真熱鬧,春花似錦梆靖、人聲如沸控汉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,828評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽姑子。三九已至,卻和暖如春测僵,著一層夾襖步出監(jiān)牢的瞬間街佑,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,069評論 1 267
  • 我被黑心中介騙來泰國打工捍靠, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留沐旨,地道東北人。 一個月前我還...
    沈念sama閱讀 46,545評論 2 362
  • 正文 我出身青樓榨婆,卻偏偏與公主長得像磁携,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子纲辽,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,658評論 2 350

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案颜武? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,737評論 1 92
  • 清除浮動是每一個 web前臺設(shè)計師必須掌握的機(jī)能。css清除浮動大全拖吼,共8種方法。 浮動會使當(dāng)前標(biāo)簽產(chǎn)生向上浮的效...
    DanD丶榆木稚年閱讀 585評論 0 4
  • 浮動會使當(dāng)前標(biāo)簽產(chǎn)生向上浮的效果这吻,同時會影響到前后標(biāo)簽吊档、父級標(biāo)簽的位置及 width height 屬性。而且同樣...
    瓦是香蕉妹閱讀 214評論 0 0
  • 在各種瀏覽器兼容問題上唾糯,這樣讓清除浮動更難了怠硼,下面總結(jié)8種清除浮動的方法: 浮動導(dǎo)致的問題:父級標(biāo)簽高度塌陷---...
    JollyJerry閱讀 1,603評論 2 13
  • 在青藏高原雪域冰川的動物王國里,母藏羚羊群進(jìn)行著一年一度的遷移繁殖之旅移怯,新出生的小羊呶嚕與卓瑪在母親們身邊度過了快...
    王昱閱讀 104評論 0 0