父div高度不能自适应子div高度的解决方案

解决父div高度不能自适应子div高度的问题，通常有以下几种方式：

1. 给父div设置高度

如果父div中只有一个子元素或者子元素比较少且固定，可以直接给父div指定固定高度，以保证其高度可以容纳所有子元素。例如：

<div class="parent" style="height: 200px;">
  <div class="child1">子元素1</div>
  <div class="child2">子元素2</div>
  <div class="child3">子元素3</div>
</div>

1. 利用浮动清除

如果父div中的子元素使用了浮动，可以在父div中添加一个空标签，利用伪类:after清除浮动，使父div高度自适应子元素高度。

<div class="parent">
  <div class="child1">子元素1</div>
  <div class="child2">子元素2</div>
  <div class="child3">子元素3</div>
  <div style="clear:both;"></div>
</div>

上面的代码中，添加的空标签设置样式clear: both;可以清除父元素中的浮动，让父div高度可以自适应子元素高度。

1. 使用flex布局

现代浏览器已经支持使用flex布局，可以通过设置容器的display: flex;，让子元素在一个轴上排列，并且可以根据容器的尺寸自适应排列。例如：

.parent {
  display: flex;
  flex-direction: row;
}

上面的代码中，设置父元素的flex布局为横向排列，子元素可以自适应排列，父div高度会自适应子元素高度。

1. 使用grid布局

类似于flex布局，现代浏览器也支持使用grid布局，可以通过设置容器的display: grid;，让子元素在网格中排列，并且可以根据容器的尺寸自适应排列。

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 1rem;
}

上面的代码中，设置父元素的grid布局为3行3列的网格，子元素可以自适应排列，父div高度会自适应子元素高度。

不同的布局方式适用于不同的场景和需求，在实际开发中可以根据需要选择合适的方式解决父div高度不能自适应子元素高度的问题。