css不写高度自适应怎么办

在网页设计中，经常要使用 CSS 来调整页面的样式。而在实际操作中，经常会碰到一个问题：在不指定高度的情况下，容器不会自适应内容的高度。这该怎么解决呢？

其实，要让容器自适应内容的高度，有多种解决方案。

方法一：使用height:auto
容器的高度设置为 auto，页面载入时高度会自动适应内容的高度，而无需给容器指定固定高度。以下是示例代码：

.box {
  height: auto;
} 

使用方法一，可以让容器自适应内容的高度，但是无法实现“容器最小高度”。也就是说，容器如果没有内容，还是会有默认高度。

方法二：使用flex布局
flex 布局可以轻松实现自适应布局，包括容器高度的自适应。以下是示例代码：

.wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
} 

使用方法二，可以让容器非常灵活地自适应内容的高度。不过，对于一些老旧浏览器，可能不支持 flex，需要做兼容处理。

方法三：使用overflow属性
可以设置容器的 overflow 属性为 hidden 或者 auto，这样容器自适应内容的高度就能够实现。以下是示例代码：

.box {
  overflow: hidden;
} 

使用方法三，可以让容器自适应内容的高度，但是可能影响页面效果，比如内容被裁剪或出现滚动条。

综上所述，使用 CSS 不指定高度自适应内容高度，有多种解决方案。在实际应用中，需要根据具体情况来选择不同的方法。