多层DIV嵌套时 父级DIV样式无效的问题
http://www.chinaz.com/design/2009/0810/86084.shtml


我们做DIV+CSS布局时常常如下的做多层DIV的嵌套，可是我们却发现不管是在IE8 还是FF下都层在毛病。

在IE8和FF下，DIV 1的边框变成了一条直线，并没有随着内部两个DIV的内容而撑大，原来是因为如果父级DIV没有定义高度，并且内容为空时所定义样式将无效。

1、当我们这样直接使用时

<div class="*">

……

ul,p,table,span等文本级别元素

</div>

这个时候我们发现div的样式可以正确应用，我们可以通过给div加边框就可以看出，这个时候DIV的边框是包含了整个文本区域

2、当我们这样用时候

<div class="1">

       <div class="2"></div>

       <div class="3"></div>

</div>

这个时候我们发现问题出现了，在IE8和FF下，DIV 1的边框变成了一条直线，在最上面，并没有随着内部两个DIV的内容而撑大，原来是因为如果父级DIV没有定义高度，并且内容为空时所定义样式将无效，或我们直观看到的就好似不自动伸长的错误，上网和网友讨论很久，经过我可爱的百度，不停的转换关键字搜索，终于找到了解决办法，屡试不爽。

定义这样一个样式表

/*解决FF，IE8，DIV嵌套时，外部DIV没有定义高度，并且内部无内容只有有内嵌套的DIV时，外DIV不能被撑大的问题*/
.box:after{ content:".";height:0px;display:block; clear:both; visibility: hidden;}

我们对div 1 使用即可 

<div class="1 box">

在刷新我们的网页试试，怎么样，终于解决了……

样式效果可以看我的网站：lushuncheng.cn