<pstylepstyle="float:left;width:200px;">這個是第1列，p> 
<pstylepstyle="float:left;width:400px;">這個是第2列，p> 
<p>這個是第3列。p> 
 
<pstylepstyle="float:left;width:200px;">這個是第1列，p> 
<pstylepstyle="float:left;width:400px;">這個是第2列，p> 
<p>這個是第3列。p> 

.clear{  
clear:both;  
}  
 
.clear{  
clear:both;  
}  

◆clear:both;可以終結在出現他之前的浮動

viewplaincopytoclipboardprint? 

.demodiv{float:left;width:100px;height:50px;  
background:red;margin:5px;}  
.d{clear:both}  
style> 
<divclassdivclass="demodiv">1div> 
<divclassdivclass="demodiv">2div> 
<divclassdivclass="d">div> 
<divclassdivclass="demodiv">3div> 
<divclassdivclass="demodiv">4div> 
 
.demodiv{float:left;width:100px;height:50px;  
background:red;margin:5px;}  
.d{clear:both}  
style> 
<divclassdivclass="demodiv">1div> 
<divclassdivclass="demodiv">2div> 
<divclassdivclass="d">div> 
<divclassdivclass="demodiv">3div> 
<divclassdivclass="demodiv">4div> 
 

 效果圖如下：

#p#
clear:both參數說明

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

◆參數：

none:允許兩邊都可以有浮動對象
both:不允許有浮動對象
left:不允許左邊有浮動對象
right:不允許右邊有浮動對象

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

主要是用在div套div的結構中。如果內div是浮動的，一般都需要clear浮動，不然的話內div會超出外div的框架

所用什么時候用clear:both;就很重要,一般我們在需要清除浮動的時候用到clear:both;不要輕意用到clear:both;因為它也有副伯用.

你在要浮動的兩個div后再加一個div，并設置樣式為clear:both，這樣就可以了(因為clear:both說明這個div不允許左右有浮動元素，于是就往下跑，撐開了父div)，如下：

viewplaincopytoclipboardprint? 

<divstyledivstyle="float:left;..."> 
abc  
div> 
<divstyledivstyle="float:left;..."> 
abc  
div> 
<divstyledivstyle="clear:both">div> 
 
<divstyledivstyle="float:left;..."> 
abc  
div> 
<divstyledivstyle="float:left;..."> 
abc  
div> 
<divstyledivstyle="clear:both">div> 
 

 你這種兩列的情況，我一般都是兩個都float:left。
 

【編輯推薦】

1. ***實現CSS頁面居中方法揭秘
2. 八個困擾新手的DIV CSS網頁布局問題
3. 全面解析CSS優先級規則
4. 專家推薦 10款優秀CSS框架
5. 實例解析清除CSS float浮動的三種方法