解决高度塌陷的四种方法

一、造成的原因：父级盒子没有给高度（实现高度自适应），子级盒子设置了浮动属性。
1.给盒子添加高度这个可以解决根本问题，但是盒子就实现不了高度自适应。

2.给父级盒子添加overflow:hidden;
原理：触发了BFC，BFC中有一条布局规则：浮动属性也参与计算高度。

3.在浮动元素的下面添加一个任意标签，设置div{clear:both;}
解释：clear(清除) left/right/both(两者)
原理：清除浮动，清除的是上方预留出来的空间
优缺点：
优点：清除方便
缺点：代码冗余
4.万能清除法
原理：触发BFC并且清除浮动
在父级元素上设置类名 clear-fix(可以把下方代码写进初始化css样式中这样方便调用)

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