解决高度坍塌的五种方式

高度坍塌的根源是：常规流盒子的自动高度在计算时，不会考虑浮动盒子

清除浮动

1. 给父元素一个固定的高度
   （不建议使用，不够灵活）
   

子元素浮动的时候，会在其内部创建一个新的bfc，此时，父元素的处于html这个根元素的渲染区域，然后子元素创建了新的bfc，也处于根元素的渲染范围下，此时父元素和子元素的关系可以说只是视觉上的，并没有更深的联系

body只有0

2. 给父元素添加属性overflow：hidden;
   原理是利用overflow：hidden;创建了一个新的bfc，在新的bfc里面，自动高度会计算浮动元素的高度，于是有了这种解决高度坍塌的方法
   缺点：当子元素有定位属性时，设置 overflow: hidden; 容器以外的部分会被裁剪掉。可能会和我们想得到的预期效果不一样
   

就像这张图，想要得到的文字部分为隐藏

3. 给父元素设置伪元素选择器，并设置常用的清除浮动的样式，然后after就会把盒子撑开

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

想要注意的是一定要设置display: block;，因为after默认是行盒

4. 在子元素的末尾添加一个空的 div ，并设置相应的清除浮动样式
   简单来说就是盒子套盒子，用这个空的div代替方法3的after，这样不好，因为直接增加了缓冲压力，会让代码无意义的变长

5. 双伪元素清除浮动法
   完全将浮动元素闭合在父元素里面，形成闭环系统，通俗来说就像是闭门关窗男女混合双打

.clearfix::after,.clearfix::before{
    
    
            content: "";
            display: table;
            /* 让before和after在一行上显示 */
        }
        .clearfix::after{
    
    
            clear: both;
        }