DIV嵌套時外層沒法自適應高度三種解決方案（轉）

原文地址：http://developer.51cto.com/art/201009/225428.htm

這裏向你們描述一下解決DIV嵌套時外層（父層）沒法自適應高度的方法，本來本身寫的CSS代碼是沒有錯誤的，可是爲何在新版的瀏覽器中會發現使用DIV嵌套時外層（父層）沒法自適應高度的錯誤，這裏看一下解決方案

 

如何解決DIV嵌套時外層（父層）沒法自適應高度？

相信不少朋友在使用CSS+DIV過程當中都會遇到這個問題，特別是目前的瀏覽器版本愈來愈多，更新的也很是快，對CSS的支持和要求愈來愈高，如IE八、IE九、FF、chrome等等瀏覽器，雖然對CSS支持完美，可是也有些錯誤，致使DIV+CSS的排版出現驗證問題。

本來本身寫的CSS代碼是沒有錯誤的，可是爲何在新版的瀏覽器中會發現使用DIV嵌套時外層（父層）沒法自適應高度的錯誤，完美所寫的代碼在IE6上能完美的展現出來，可是在IE八、FF上卻出現不適應高度的問題，難道是CSS不兼容瀏覽器？下面就來講說其解決方法。

假如完美的CSS代碼已經經過了W3C的驗證，那就說明，咱們寫的代碼徹底是沒有錯誤的，那麼是說明緣由呢？這個緣由我也說不清楚，在網上查了很久，我也沒有查到緣由，可是查到了相關的解決辦法，網上的解決辦法有3種，可是我以爲不完美，下面列出網上的我查找到的解決方法。

一、在外層的CSS代碼中加入display:table

二、第二種解決方法是定義一個CSS類：

 

 

.box:after{  content:".";
 display:block;
 height:0px;
 clear:both;
 visibility:hidden;
}

 

而後將父層DIV代碼中的<divid="main">改成<divid="main"class="box">。

三、在外層（父層）CSS代碼中加入overflow:auto;

在我使用了上面3種方法後，我以爲只有第3種方法有效，可是其效果不是很好，可是不會出現異常，不過爲了更完美的解決這個問題，我介紹一個頗有效的方法給你們試試，這個方法絕對有效，並且也是很簡單的。

最終解決方法：根據上面的3個方法，最終個人解決方法是，在外層（父層）CSS代碼中加入下面兩個屬性值（一個都不能少）。

 

 

clear:both;overflow:auto;