DIV CSS 佈局教程網

五、FLOAT閉合（clearingfloat）

網頁在某些浏覽器上顯示錯位很多時候都是因為使用了float浮動而沒有真正閉合，這也是div無法自適應高度的一個原因。如果父div沒有設float而其子div卻設了float的話,父div無法包住整個子DIV，這種情況一般出現在一個父DIV下包含多個子DIV。解決辦法：

１、給父DIV也設上float(不要罵我，我知道是廢話)

2、在所有子DIV後新加一個空DIV(不推薦，有些浏覽器可以看見空DIV產生的空隙)

比如：

.parent{width:100px;}  
.son1{float:left;width:20px;}  
.son2{float:left;width:80px;}  
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}  
 
<divclassdivclass="parent"> 
<divclassdivclass="son1">div> 
<divclassdivclass="son2">div> 
<divclassdivclass="clear">div> 
div> 
 

3、萬能float閉合

將以下代碼加入GlobalCSS中,給需要閉合的div加上class=”clearfix”即可,屢試不爽.
代碼:

<style> 
/*ClearFix*/  
.clearfix:after{  
content:".";  
display:block;  
height:0;  
clear:both;  
visibility:hidden;  
}  
.clearfix{  
display:inline-block;  
}  
/*HidefromIEMac\*/  
.clearfix{display:block;}  
/*EndhidefromIEMac*/  
/*endofclearfix*/  
style> 

:after（偽對象）,設置在對象後發生的內容，通常和content配合使用，IE不支持此偽對象，非Ie浏覽器支持，所以並不影響到IE/WIN浏覽器。這種的最麻煩。

4、overflow:auto（剛看到的，極力推薦）

只要在父DIV的CSS中加上overflow:auto就搞定。

舉例：

.parent{width:100px;overflow:auto}  
.son1{float:left;width:20px;}  
.son2{float:left;width:80px;}  
 
<divclassdivclass="parent"> 
<divclassdivclass="son1">div> 
<divclassdivclass="son2">div> 
div> 

作者原話：原理是，外圍元素之所以不能很好的延伸，問題出在了overflow上，因為overflow不可見（見W3C的解釋）。現在只要將給外圍元素添加一個“overflow:auto”，就可以解決問題，結果是除了IE，真的可以解決。下來就要解決IE的問題了，再加