什么是高度塌陷和解决基本方法

一、什么是高度塌陷

        在浮动布局中，父元素的高度默认是被子元素撑开的

        当子元素浮动后，子元素会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失

        父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱，所以高度塌陷是浮动布局中比较常见的问题，我们必须解决。

二、解决方法

        在了解高度塌陷之后，我们就要了解与其相关的一个东西BFC

BFC（Block Formation Contex）块级格式化环境

BFC是一个CSS中隐藏属性，可以为一个元素开始BFC

开启BFC该元素会变成一个独立的布局区域

2.1开启BFC

        元素开启BFC后的特点：

                1.开启BFC的元素不会被浮动元素所覆盖

                2.开启BFC的元素子元素和父元素外边距不会重叠

                3.开启BFC的元素可以包含浮动的子元素

        可以通过一些特殊方式来开启元素的BFC：

                1.设置元素的浮动（不推荐）

                2.设置为行内块元素（不推荐）

                3.将元素的overflow设置为一个非visible的值

                        常用的方式为元素设置：overflow：hidden开启BFC

2.2使用after伪元素解决高度塌陷（完美方案）

<style>
    .box{
        border:18px red solid;
    }
    .box2{
        width:100px;
        height:100px;
        float:left;
    }
    .box::after{
        display:block;
        clear:both;
    }
</style>

2.3设置clearfix

        clearfix这个样式可以同时解决高度塌陷和外边距重叠的问题，当我们遇到这些问题的时候，直接使用clearfix这个类即可

.clearfix::before,.clearfix::after{
     content:'';
     display:table;
     clear:both;
}