高度塌陷问题
1.在浮动布局中，父元素的高度默认是被子元素撑开的
2.当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑开父元素的高度，导致父元素的高度丢失。
3.父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱，所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须处理。
BFC (Block Formatting Context) 块级格式化环境
1.BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的布局区域。
2.开启BFC后的特点：
-开启BFC的元素，不会被浮动元素所覆盖。
-开启BFC的元素，子元素和父元素外边距不会重叠。
-开启BFC的元素，可以包含浮动的子元素。
3.通过一些特殊的方式开启元素的BFC：
-设置元素的浮动（不推荐）。
-将元素设置为行内块元素display: inline-block（不推荐）。
-将元素的overflow设置为一个非visible的值：
-常用的方式：为元素设置 overflow:hidden，开启其BFC，以使其可以包含浮动元素。
清除浮动产生的影响
1.clear
-作用: 清除浮动元素对当前元素的影响
2.可选值
-left: 清除左侧浮动元素对当前元素的影响
-right: 清除右侧浮动元素对当前元素的影响
-both: 清除两次中最大影响的那侧
3.原理: 设置清除浮动以后,浏览器会自动为元素添加一个上外边距,以使其位置不受其它元素的影响（但是外边距在开发者工具中不显示）。
使用after伪类解决高度塌陷
1.高度塌陷最终解决方法（相当于在浮动的子元素后面加一个空的块元素，用clear元素消除其受浮动的影响，它将会撑开父元素）
.box::after {
content: '';
display: block;
clear: both;
}
解决外边距重叠和高度塌陷
1.clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题。
2.解决外边距重叠
.clearfix::before{
content: '';
display: table;
}
3.解决高度塌陷
.clearfix::after {
content: '';
display: table;
clear: both;
}
4.所以高度塌陷以及外边距重叠问题的最终解决方案是在CSS中添加以下代码，哪个元素出现问题，给其类中添加clearfix类。
.clearfix::before,
.clearfix::after {
content: '';
display: table;
clear: both;
}
学识浅薄，如有错误，恳请斧正，在下不胜感激。