css中div如何自适应子元素的高度

1、clear方式：

.clearfix{
    zoom:1;
}
.clearfix::after{
    content:"";
    display:block;
    clear:both;
} 

使用clearfix类的方法，在子元素后面插入一个带有clear:both属性的伪元素，来清除float的影响。但是这种方法可能会导致大量的CSS冗余，代码混乱。

2、overflow方式：

.parent{
    overflow:hidden;
} 

将父元素的overflow属性设置为hidden，这样就可以让父元素自适应子元素的高度。但是这种方法可能会掩盖子元素的溢出内容，不适合所有场景。

3、table方式：

.parent{
    display:table;
    table-layout:fixed;
}
.child{
    display:table-cell;
} 

将父元素的display属性设置为table，子元素的display属性设置为table-cell，这样就可以让父元素自适应子元素的高度。但是这种方法可能会增加DOM节点。

4、Flexbox方式：

.parent{
    display:flex;
    flex-wrap:wrap;
}
.child{
    flex:1;
} 

将父元素的display属性设置为flex，子元素使用flex属性，这样就可以让父元素自适应子元素的高度。这种方法比较推荐，因为可以在布局的同时保持代码简洁和易懂。