子元素div高度不确定时父div高度如何自适应

在 CSS 中，当子元素 div 的高度不确定时，父元素 div 的高度无法自适应。这是由于父元素 div 的高度默认为 auto，无法自动适应子元素 div 的高度。下面是一个完整攻略，包含了如何让父元素 div 的高度自适应子元素 div 的高度的过程和两个示例说明。

让父元素 div 的高度自适应子元素 div 的高度

我们可以使用以下两种方法来让父元素 div 的高度自适应子元素 div 的高度：

方法一：使用浮动

我们可以将子元素 div 设置为浮动，以使其脱离文档流。然后，我们可以在父元素 div 中添加一个空的 div 元素，并将其设置为 clear: both，以清除浮动。这样，父元素 div 的高度将自动适应子元素 div 的高度。下面是一个示例：

<div class="parent">
  <div class="child">这是一个子元素</div>
  <div class="clear"></div>
</div>

.parent {
  border: 1px solid #ccc;
}

.child {
  float: left;
  width: 50%;
}

.clear {
  clear: both;
}

上述代码中，我们将 .child 元素设置为浮动，以使其脱离文档流。我们在父元素 .parent 中添加了一个空的 div 元素，并将其设置为 clear: both，以清除浮动。这样，父元素 .parent 的高度将自动适应子元素 .child 的高度。

方法二：使用 flexbox

我们可以将父元素 div 的 display 属性设置为 flex，以使用 flexbox 布局。然后，我们可以将子元素 div 的 align-self 属性设置为 stretch，以使其自动填充父元素 div 的高度。下面是一个示例：

<div class="parent">
  <div class="child">这是一个子元素</div>
</div>

.parent {
  border: 1px solid #ccc;
  display: flex;
}

.child {
  align-self: stretch;
  width: 50%;
}

上述代码中，我们将 .parent 元素的 display 属性设置为 flex，以使用 flexbox 布局。我们将 .child 元素的 align-self 属性设置为 stretch，以使其自动填充父元素 .parent 的高度。

示例说明

下面是两个示例，演示如何让父元素 div 的高度自适应子元素 div 的高度。

示例一：使用浮动

<div class="parent">
  <div class="child">这是一个子元素</div>
  <div class="clear"></div>
</div>

.parent {
  border: 1px solid #ccc;
}

.child {
  float: left;
  width: 50%;
}

.clear {
  clear: both;
}

上述代码中，我们将 .child 元素设置为浮动，以使其脱离文档流。我们在父元素 .parent 中添加了一个空的 div 元素，并将其设置为 clear: both，以清除浮动。这样，父元素 .parent 的高度将自动适应子元素 .child 的高度。

示例二：使用 flexbox

<div class="parent">
  <div class="child">这是一个子元素</div>
</div>

.parent {
  border: 1px solid #ccc;
  display: flex;
}

.child {
  align-self: stretch;
  width: 50%;
}

上述代码中，我们将 .parent 元素的 display 属性设置为 flex，以使用 flexbox 布局。我们将 .child 元素的 align-self 属性设置为 stretch，以使其自动填充父元素 .parent 的高度。