HTML浮动元素塌陷问题

浮动元素塌陷出现场景：

如下代码所示，当子元素设置了浮动，这会使得子元素完全脱离了文档流，浮动元素不再占据原本的空间。这就会使得父元素发生高度塌陷。

.left,
.right {
    width: 200px;
    height: 200px;
    float: left;
}
.left {
    background-color: antiquewhite;
}
.right {
    background-color: aliceblue;
}
.footer {
    width: 400px;
    height: 400px;
    background-color: aquamarine;

<div class="father">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>

浮动前效果为：

添加浮动后，页面效果为： 

 解决方法：

（1）给父元素添加指定的高度

.father{
    height: 200px;
}

效果如下： 

注意：

这一解决方案并不推荐使用，子盒子数量一旦增多，发生换行后，父盒子的高度又发生塌陷了

适用场景：高度确定不会发生换行的场景

（2）清浮动

.footer {
    width: 400px;
    height: 400px;
    background-color: aquamarine;
    clear: both;  /* 清浮动 */ 
}

这一方式也可以解决问题。

但在没有发生浮动的盒子上进行清浮动了，不推荐使用

（3）准备空盒子并设置清浮动

<div class="father">
    <div class="left"></div>
    <div class="right"></div>
    <div style="clear:both"></div>
</div>
<div class="footer"></div>

注意：空盒子的位置在浮动元素的最后

缺点：存在了一个没有实际意义的盒子，代码维护性不好

（4）设置父盒子的overflow属性

.father {
    /* height: 200px; */
    /* overflow: hidden; */
    overflow: auto;
}

注意：使用overflow:hidden可能会导致父盒子内的溢出元素被隐藏

（5）将父盒子设置为flex布局

.father {
    /* height: 200px; */
    /* overflow: hidden; */
    /* overflow: auto; */
    display: flex;
    /* 弹性盒布局 */
}

（6）使用定位来替代浮动效果

注意调整好盒子的位置

*{
    margin: 0;
    padding: 0;
}
.left,
.right {
    width: 200px;
    height: 200px;
    position: absolute;
}
.left {
    left: 0;
    background-color: antiquewhite;
}
.right {
    left: 200px;
    background-color: aliceblue;
}
.father{
    position: relative;
}
.footer {
    position: absolute;
    top: 200px;
    width: 400px;
    height: 400px;
    background-color: aquamarine;
}

（7）使用伪元素清除浮动（推荐使用）

对父元素进行清除浮动，添加一个clearfix的类。

.clearfix::after{
    content: "";
    display: block;
    clear: both;
    /* visibility: hidden; */
}