CSS中clear:both的理解

在CSS中咱們會常常要用到「清除浮動」Clear，比較典型的就是clear:both;    
CSS手冊上是這樣說明的：該屬性的值指出了不容許有浮動對象的邊。這個屬性是用來控制float屬性在文檔流的物理位置的。    
   
當屬性設置float（浮動）時，其所在的物理位置已經脫離文檔流了，可是大多時候咱們但願文檔流能識別float（浮動），或者是但願float（浮動）後面的元素不被float（浮動）所影響，這個時候咱們就須要用clear:both;來清除。

語法： clear : none | left |right | both

參數：  
none : 容許兩邊均可以有浮動對象    
both : 不容許有浮動對象    
left : 不容許左邊有浮動對象    
right : 不容許右邊有浮動對象

說明： 該屬性的值指出了不容許有浮動對象的邊。請參閱float屬性。 對應的腳本特性爲clear

好比：  

1 1 <p style="float:left;width:200px;">this is 1st row</p>2 2 <p style="float:right;width:400px;">this is 2ed row</p>3 3 <p >this is the third row</p>

若是不用清除浮動，那麼第3列文字就會和第一、2列文字在一塊兒 ，以下圖：

因此咱們在第3個這列加一個清除浮動 clear:both;  

1 <p style="float:left;width:200px;">this is 1st row</p>2 <p style="float:right;width:400px;">this is 2ed row</p>3 <p style="clear:left;">this is the third row</p>

這時的效果以下：

咱們在網頁設計時還有一種很廣泛的狀況：

 1 <style type="text/css"> 2 #main {background-color: #3399CC;width: 600px;padding: 20px;} 3 #sidebar {background-color: #FF6600;    float: left;width: 130px;} 4 #container {float: right;width: 420px;background-color: #FFFF33;} 5 </style> 6 <div id="main"> 7 <div id="sidebar">content1 content1 content1</div> 8 <div id="container">content2 content2 content2</div> 9 </div>10 <p style="clear:both;">content3</p>

該頁面測試在IE下效果正是咱們所要：藍色塊內部有紅色和黃色兩個色塊內容，同時在藍色塊如下是第三段文本。

 
不過Firefox的效果可不是這樣的，以下所示：

咱們不能單單想在下一層清除就能完成咱們的工做，咱們必須在浮動元素所在標籤閉合以前及時進行「清除」。

 1 <style type="text/css"> 2 #main {background-color: #3399CC;width: 600px;padding: 20px;} 3 #sidebar {background-color: #FF6600;    float: left;width: 130px;} 4 #container {float: right;width: 420px;background-color: #FFFF33;} 5 .clear {clear: both;} 6 </style> 7 <div id="main"> 8 <div id="sidebar">content1 content1 content1</div> 9 <div id="container">content2 content2 content2</div>10 <div class="clear"></div>11 </div>12 <p>content3</p>

這時Firefox下的頁面顯示也就正常了

不過這時會因多加的<div class="clear"></div>標籤會引發IE和FF高度變化（以下圖，顯然IE下藍色背景的高度增長了）：

這個高度變化能夠經過以下方法解決：

1 .clear {2      clear: both;3      height:1px;4      margin-top:-1px;5      overflow:hidden;6 }