因浮动造成的高度塌陷解决方案

总体解决方案

首先：放出结论，浮动的造成的塌陷有三种解决方案。

方法一：固定父盒子的高度。

即使用height属性，固定父盒子的总体高度，不可更改，本方案只推荐在确定父盒子高度的情况下使用，如果不能确定，可能会出现排版混乱的情况

方法二：将盒子转换为BFC区域

div{
    overflow：hidden
        }

使用overflow代码，将自动把父盒子转换为BFC区域，采用BFC区域后，将声明本盒子内的子元素布局将不会影响外部的文档，子元素将自动将父盒子撑开。

方案三：代码清除浮动

.div1{
    clear:left；
        }
.div2{
    clear:right；
        }
.div3{
    clear:both;
        }

清除浮动的影响：left表示清除左浮动产生的影响

right表示清除右浮动产生的影响

both表示清除左右浮动的影响

当使用哪个方向的浮动时，就清除当前方向的影响。

方案四：利用伪类元素添加内容

/* 使用伪类来消除影响 */
.div::after{
    content:"";
    display:block;
    clear:both
}

伪类的原理就是给大盒子的最后添加内容，afrer代表最后，并将其转换为块级元素独占一行，并清除浮动产生的影响，将整个盒子撑开。

PS:

本博客主要作用在于交流与学习作用，博客内容将根据本人遇到的情况来进行更新，勿喷，同时也欢迎大佬来进行指正