2019獨角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

????使用div+css布局的好處不用多說，經(jīng)常性地會使用到float，那么清除浮動就是必須要做的，而且隨時性地對父級元素清除浮動的做法也被認(rèn)為是書寫CSS的良好習(xí)慣之一。

????常用的清除浮動的方法有以下三種。
??????此為未清除浮動源代碼，運行代碼無法查看到父級元素淺黃色背景。

<style type="text/css"> ?

<!-- ?

? ? *{margin:0;padding:0;} ?

? ? body{font:36px bold; color:#F00; text-align:center;} ?

? ? #layout{background:#FF9;} ?

#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} ?

? ? #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} ?

--> ?

</style> ?

<div id="layout"> ?

? ? <div id="left">Left</div> ?

? ? <div id="right">Right</div> ?

</div>?

1、使用空標(biāo)簽清除浮動。我用了很久的一種方法，空標(biāo)簽可以是div標(biāo)簽，也可以是P標(biāo)簽。我習(xí)慣用<P>，夠簡短，也有很多人用<hr>，只是需要另外為其清除邊框，但理論上可以是任何標(biāo)簽。這種方式是在需要清除浮動的父級元素內(nèi)部的所有浮動元素后添加這樣一個標(biāo)簽清楚浮動，并為其定義CSS代碼：clear:both。此方法的弊端在于增加了無意義的結(jié)構(gòu)元素。?

<style type="text/css"> ?

<!-- ?

? ? *{margin:0;padding:0;} ?

? ? body{font:36px bold; color:#F00; text-align:center;} ?

? ? #layout{background:#FF9;} ?

#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} ?

? ? #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} ?

? ? .clr{clear:both;} ?

--> ?

</style> ?

<div id="layout"> ?

? ? <div id="left">Left</div> ?

? ? <div id="right">Right</div> ?

? ? <p class="clr"></p> ?

</div>?

? ?2、使用overflow屬性。此方法有效地解決了通過空標(biāo)簽元素清除浮動而不得不增加無意代碼的弊端。使用該方法是只需在需要清除浮動的元素中定義CSS屬性：overflow:auto，即可！"zoom:1"用于兼容IE6。?

<style type="text/css"> ?

<!-- ?

? ? *{margin:0;padding:0;} ?

? ? body{font:36px bold; color:#F00; text-align:center;} ?

? ? #layout{background:#FF9;overflow:auto;zoom:1;} ?

? ? #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} ?

? ? #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} ?

--> ?

</style> ?

<div id="layout"> ?

? ? <div id="left">Left</div> ?

? ? <div id="right">Right</div> ?

</div>?

? 3、使用after偽對象清楚浮動。該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設(shè)置height:0，否則該元素會比實際高出若干像素；二、content屬性是必須的，但其值可以為空，藍色理想討論該方法的時候content屬性的值設(shè)為"."，但我發(fā)現(xiàn)為空亦是可以的。?

<style type="text/css"> ?

<!-- ?

? ? *{margin:0;padding:0;} ?

? ? body{font:36px bold; color:#F00; text-align:center;} ?

? ? #layout{background:#FF9;} ?

? ? #layout:after{display:block;clear:both;content:"";visibility:hidden;height:0;} ?

? ? #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} ?

? ? #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} ?

--> ?

</style> ?

<div id="layout"> ?

? ? <div id="left">Left</div> ?

? ? <div id="right">Right</div> ?

</div>?

此三種方法皆有一定弊端，使用時應(yīng)擇優(yōu)選擇，比較之下第二種方法更為可取。以上方法，并非原創(chuàng)，皆來源于網(wǎng)絡(luò)，在此小作整理，原作者保留所有權(quán)利。

轉(zhuǎn)載于:https://my.oschina.net/u/1865857/blog/291290

總結(jié)

以上是生活随笔為你收集整理的CSS清除浮动常用方法小结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。