DIV嵌套时外层无法自适应高度三种解决方案

这里向大家描述一下解决DIV嵌套时外层（父层）无法自适应高度的方法，原本自己写的CSS代码是没有错误的，但是为什么在新版的浏览器中会发现使用DIV嵌套时外层（父层）无法自适应高度的错误，这里看一下解决方案。

如何解决DIV嵌套时外层（父层）无法自适应高度？

相信很多朋友在使用CSS+DIV过程中都会遇到这个问题，特别是目前的浏览器版本越来越多，更新的也非常快，对CSS的支持和要求越来越高，如IE8、IE9、FF、chrome等等浏览器，虽然对CSS支持***，但是也有些错误，导致DIV+CSS的排版出现验证问题。

原本自己写的CSS代码是没有错误的，但是为什么在新版的浏览器中会发现使用DIV嵌套时外层（父层）无法自适应高度的错误，***所写的代码在IE6上能***的展示出来，但是在IE8、FF上却出现不适应高度的问题，难道是CSS不兼容浏览器？下面就来说说其解决方法。

假如***的CSS代码已经通过了W3C的验证，那就说明，我们写的代码完全是没有错误的，那么是说明原因呢？这个原因我也说不清楚，在网上查了好久，我也没有查到原因，但是查到了相关的解决办法，网上的解决办法有3种，但是我觉得不***，下面列出网上的我查找到的解决方法。

1、在外层的CSS代码中加入display:table

2、第二种解决方法是定义一个CSS类：

 
 
 

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

然后将父层DIV代码中的改为。

3、在外层（父层）CSS代码中加入overflow:auto;

在我使用了上面3种方法后，我觉得只有第3种方法有效，但是其效果不是很好，但是不会出现异常，不过为了更***的解决这个问题，我介绍一个很有效的方法给大家试试，这个方法绝对有效，而且也是很简单的。

最终解决方法：根据上面的3个方法，最终我的解决方法是，在外层（父层）CSS代码中加入下面两个属性值（一个都不能少）。 

 
 
 

  
  
  
clear:both;overflow:auto;  
  
  
  
 
 
 
 

当前文章：DIV嵌套时外层无法自适应高度三种解决方案
文章来源：http://www.shufengxianlan.com/qtweb/news8/364708.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联