[分享]css元素的父元素的高度自适应

在CSS布局中，父元素的高度自适应是一个常见的需求。特别是在响应式设计中，我们希望元素的高度可以根据内容自动调整，在不同尺寸的设备上都能自然展示。实现父元素高度自适应的方法有很多，以下是比较常用的几种...

在CSS布局中，父元素的高度自适应是一个常见的需求。特别是在响应式设计中，我们希望元素的高度可以根据内容自动调整，在不同尺寸的设备上都能自然展示。

实现父元素高度自适应的方法有很多，以下是比较常用的几种方法：

使用float浮动清除浮动

.parent {
  overflow: hidden; /*清除浮动*/
}
.child {
  float: left; /*添加浮动*/
} 

在父元素上添加 overflow: hidden; 可以清除子元素浮动产生的影响，从而让父元素高度自适应。

使用BFC清除浮动

.parent {
  display: flow-root; /*生成BFC*/
}
.child {
  float: left; /*添加浮动*/
} 

在父元素上添加 display: flow-root; 可以让父元素生成BFC，从而清除子元素浮动产生的影响，实现父元素高度自适应。

使用flex布局

.parent {
  display: flex;
  flex-wrap: wrap;
}
.child {
  flex: 1 0 200px; /*flex-grow, flex-shrink, flex-basis*/
} 

使用flex布局可以方便地实现父元素高度自适应，只需要将父元素设置为 display: flex; ，然后在子元素上使用 flex: 1; 即可让子元素均匀分布并占据剩余空间。

通过以上三种方法，我们可以方便地实现父元素高度自适应，从而让页面呈现更加美观、合理的布局。