css高度自适应出现盒子高度塌陷问题

在网页布局中经常会遇到想给盒子设置高度自适应但出现高度塌陷问题，造成这个问题的原因就在于父盒子没有设置高度，子盒子有浮动

这里有四种解决高度塌陷的方法

一、给父盒子添加高度，这个可以从根本上解决问题，但无法做到高度自适应。

二、给父级添加overflow：hidden属性,原理是我们给父盒子添加文本溢出隐藏属性后，会触发BFC（块级格式化上下文），这时浮动的盒子也会参与高度计算。这样就可以解决高度自适应问题
缺点是当有子级元素需要超出父盒子时元素会被隐藏

 div {
            width: 200px;
            overflow: hidden;
        }

三、给父盒子中最后一个子级添加任意标签（div），给标签添加clear：both属性。这样就可以解决高度自适应问题
缺点是会生成多余的代码结构

 div{
           width: 200px;
           clear: both;
       }

四、万能清除法 推荐使用这种 可将这种方法单独添加在类名里，需要直接引入即可

div::after {
            content: "";
            width: 100%;
            height: 0;
            clear: both;
            display: block;
            overflow: hidden;
            visibility: hidden;
        }