浮动以后处理高度塌陷问题解决方案首先说一下什么是高度塌陷的问题：在浮动的布局中，父元素是被子元素撑开的，如果子元素经行

首先说一下什么是高度塌陷的问题：

在浮动的布局中，父元素是被子元素撑开的，如果子元素经行了float，或者使用了绝对定位，此时的父元素的高度就会塌陷。

高度塌陷代码演示：

    <style>
        .father{
            width: 200px;
            padding: 10px;

            background-color: aqua;
        }
        .son{
            float: left;
            width: 200px;
            height: 200px;
            background-color: bisque;
        }

    </style>
<body>
    <div class="father">
        <div class = son>

        </div>
    </div>
</body>

此时当子元素浮动以后看到父元素的高度被塌陷了。如何解决这个问题有以下几种方案：

方案一：开启BFC 方案二： clear 方案三：使用伪类after 方案四： clearfix

方案一：BFC全称 (Block Formatting Context) 块级格式化环境

开启BFC的特点：

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

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

3、开启BFC的元素可以包含子元素

如何开启BFC：

在父元素上设置如下代码

    display: inline-block;
    overflow: hidden;

完整代码：

    <style>
        .father{
            width: 200px;
            padding: 10px;
            background-color: aqua;
            display: inline-block;
            overflow: hidden;
        }
        .son{
            float: left;

            width: 200px;
            height: 200px;
            background-color: bisque;
        }
       
    </style>
<body>
    <div class="father">
        <div class = son>

        </div>
    </div>
</body>

问题解决

方案二：使用 clear 清除浮动

同样需要先将父元素变成行内块元素，然后在父类使用以下代码

left 清除左侧浮动元素对当前元素的影响

right 清除右侧浮动元素对当前元素的影响

both 清除两侧中影响最大的

    clear: both;
    display: inline-block;

问题解决

方案三：使用after伪类解决高度塌陷

给父元素添加一个伪类 after
after 是行内元素，需要修改为块元素
clear 清除相对应的浮动

    .father::after{
        content: '';
        /* after默认是行内元素，需要修改为块元素 */
        display: block;
        clear: both;
    }

问题解决

方案四：clearfix

解决高度塌陷和外边距重叠

.clearfix::before,  //意为在类名为clearfix的最后面和前面添加下面的内容
.clearfix::after{
    content: '';
    display: table;
    clear: both;
}

成功解决塌陷问题