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;