我们先看一段测试代码：
效果图：
从上面的代码来看，包含一个父div和一个子div。而子div又有高度，但是审查元素时，却发现该父div却没有高度（所以此时父div的背景色蓝色也没有显示出来）。这是为什么呢？
原因：
当一个元素只包含浮动元素的时候，它会出现高度折叠,即元素的上下底边重合，和高度为0效果一样。
aBox的所有div加上了浮动属性。在显示器的侧面，bBox这个div已经脱离了aBox这个div，也就是说，此时的bBox的宽高是多少，对于已经脱离了的aBox来说，都是不起作用的。
解决方法：
给包含元素设置高度
直接给元素设置固定高度。但是这样的高度无法自适应。
利用overflow:hidden属性
在我的一篇关于overflow的属性中有介绍 https://blog.csdn.net/qq_36470686/article/details/82846924
添加一个空div
这种方法是添加一个空的div，这个div和浮动元素同一级别，且位于浮动元素的最后。它在这里并不具有实际意义，它的作用只是撑开div标签而已。
利用伪元素:after
.aBox:after{
background-color:blue;
float:left;
content:"";
display: block;
clear: both;
}
在:after为元素里面用到了content属性，这样这条样式的意思是在class为aBox的div元素后面生成指定的内容，这里生成的内容是一个空字符串，因为只是让它来消除div的高度折叠，并不让它显示出来。还有，这条样式里有display属性，要将他设置成block，这样clear属性才会起作用，因为清除操作只作用于块级元素，它的原理是为要执行清除操作的元素添加上边距，以此让元素降到浮动元素的下面，而操作行内元素的上边距不起作用。