html div显示多层,多层DIV嵌套时 父级DIV样式无效的问题

在IE8和FF下，DIV

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

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

在IE8和FF下，DIV

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

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

……

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

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

2、当我们这样用时候

class="2">

class="3">

这个时候我们发现问题出现了，在IE8和FF下，DIV

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

定义这样一个样式表

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

visibility: hidden;}

我们对div 1 使用即可

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