导致原因：当需要父元素被子元素撑开时，子元素浮动导致父元素高度为0。

解决方法：使用伪元素清除浮动(:after)，将下面的代码给对应的父元素即可清除浮动。

.cl:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

为什么要引入伪类、伪元素：

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列表中的第一个元素，又或者是鼠标悬停在某个超链接上时要设置的样式。

什么是伪类、伪元素：

伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素：用于创建一些不在文档树中的元素，并为其添加样式。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。

转自https://blog.csdn.net/m0_37686205/article/details/88396191