css中div嵌套不显示

在使用CSS进行网页设计时，经常会遇到div嵌套不显示的问题。这是因为CSS样式会影响到div内部的元素显示，造成了div的尺寸和位置发生变化。

<div class="outer">
  <div class="inner">
    <p>测试文本</p>
  </div>
</div>

.outer {
  width: 300px;
  height: 100px;
  background-color: red;
}
.inner {
  width: 200px;
  height: 50px;
  background-color: blue;
}
p {
  color: white;
} 

上面的代码中，我们定义了一个外层div和内层div，内层div中还嵌套了一个p标签。但是，当我们运行代码时却发现，内层div和p标签都没有显示出来。

这是因为内层div的尺寸受到了p标签样式的影响，导致内层div的高度为0。解决这个问题的方法有两种：

1. 给内层div添加浮动属性。

.inner {
  width: 200px;
  height: 50px;
  background-color: blue;
  float: left;
} 

这种方式可以让内层div脱离文档流，不受外部影响。但是，如果外部还有其他元素需要与内层div进行布局，在处理时需要注意浮动元素对布局的影响。

2. 给外层div添加overflow属性。

.outer {
  width: 300px;
  height: 100px;
  background-color: red;
  overflow: hidden;
} 

这种方式可以让外层div成为一个块级容器，限制了内部元素的尺寸和位置，避免了影响布局的问题。但是，如果内部元素超出了外部div的尺寸，会被隐藏。

因此，在设计网页时需要根据实际情况选择合适的解决方案。同时，尽量避免在div嵌套的层级过深，减少不必要的麻烦。