                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /企業網站綜合布局實戰

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

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

<head>

<title>無標題文檔</title>

/*在此定義相應的類選擇器，并根據要求設置相關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;}

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

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

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

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

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

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

此三種方法各有利弊，使用時應擇優選擇，個人習慣于第一種，比較穩定可靠。

參考鏈接：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>