为什么父元素和子元素div具有相同的高度？

父元素和子元素div具有相同的高度通常是因为父元素没有设置固定的高度，并且子元素div采用了默认的行内布局方式。

以下是一个代码示例，展示了如何使父元素和子元素div具有相同的高度：

HTML代码：

<div class="parent">
  <div class="child">子元素div</div>
</div>

CSS代码：

.parent {
  background-color: lightgray;
  overflow: hidden; /* 清除浮动 */
}

.child {
  background-color: gray;
  float: left; /* 设置子元素浮动 */
  width: 50%; /* 设置子元素宽度 */
}

在上述代码中，父元素div的高度未设置，子元素div采用了浮动布局。这样，子元素div会脱离文档流，父元素div无法撑开高度，导致父元素和子元素div的高度不一致。

为了解决这个问题，我们可以在父元素div上设置overflow: hidden;属性来清除浮动。这样，父元素div会根据子元素div的高度自动调整高度，从而使父元素和子元素div具有相同的高度。

请注意，在实际开发中，可能会有其他因素导致父元素和子元素div的高度不一致，如添加了其他元素、设置了其他样式等。以上代码仅提供了一种解决方案，具体根据实际情况进行调整。