                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /企業(yè)網(wǎng)站綜合布局實戰(zhàn)

分享一下。常用的清除浮動的方法有以下三種:。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

/*在此定義相應(yīng)的類選擇器，并根據(jù)要求設(shè)置相關(guān)CSS屬性*/

/*------法一

.mainBox{width:960px;

? ? ?height:300px;

? ? ?background-color:#cff;

? ? ?clear:left;}

------*/

/*------法二------*/

.mainBox{width:960px;

? ? ? ? ? background-color:#CFF;

? ? ? ? ? overflow:hidden;

? ? ? ? ? *zoom:1;}

? ? ? ? ??

.lBox{width:740px;

? ? ? height:300px;

? ? ? background-color:#c9f;

? ? ? float:left;}

.rBox{width:210px;

? ? ? height:300px;

? ? ? background-color:#fcf;

? ? ? float:right;}

/*------總結(jié)：常用的清除浮動的方法。

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)元素。

對于使用額外標(biāo)簽清除浮動（閉合浮動元素），是W3C推薦的做法。至于使用<br />元素還是空<div></div>可以根據(jù)自己的喜好來選（當(dāng)然你也可以使用其它塊級元素）。不過要注意的是，<br />本身是有表現(xiàn)的，它會多出一個換行出來，所以要設(shè)定它的heigh為0，以隱藏它的表現(xiàn)。所以大多數(shù)情況下使用空<div>比較合適。

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

不過使用overflow的時候，可能會對頁面表現(xiàn)帶來影響，而且這種影響是不確定的，你最好是能在多個瀏覽器上測試你的頁面；

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

此三種方法各有利弊，使用時應(yīng)擇優(yōu)選擇，個人習(xí)慣于第一種，比較穩(wěn)定可靠。

參考鏈接：http://www.cnblogs.com/fengzheng126/archive/2012/05/19/2508778.html

------*/

</style>

</head>

<body>

? ? <div class="lBox"></div>

? ? <div class="rBox"></div>

</div>

</body>

</html>