嵌套块级元素垂直外边距高度塌陷的问题（BFC）

问题描述: 在浮动(float)布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，会完全脱离文档流，无法撑开父盒子的高度，父元素高度丢失，其下的元素会自动上移，导致布局混乱。

解决方法: 开启BFC(块级格式化环境) BFC是CSS中隐含的属性，可为一个元素开启BFC
开启BFC该元素会变成一个独立的布局区域

元素开启BFC的特点:
1、开启BFC的元素不会被浮动元素所覆盖
2、开启BFC的元素子元素和父元素外边距不会重叠
3、开启BFC的元素可包含浮动的子元素

开启BFC的方式:
1、设置元素的浮动
2、将元素设置为行内块元素
3、将父元素设置overflow属性为一个非visible的值，例：overflow: auto;
4、在父元素后面添加一个空的div，添加样式

    .div{
           clear:both; //清楚浮动
       }

5、最终解决方案：使用after伪元素

父级::after{
                display: block;
                clear: both;
           }
           
     或
 声明一个公共类样式, 哪个父元素需要调用就添加这个公共类clearfix即可
           
 /*清除浮动*/
/*解决外边距塌陷问题*/
.clearfix::before,
.clearfix::after{
	content: '';
	display: table;
	clear: both;
}