子元素浮动后不在占有原文档流的位置，如果父元素没有设置高度，就会引起父元素高度塌陷，解决的办法如下：
1：给父元素设置高度，如下图：
注：只适合高度固定的布局。
2：给父元素添加：overflow:hidden/auto/scroll都可以清除浮动，如下图：
注：内容增多时会造成不会自动换行，导致内容被隐藏，无法显示需要溢出的元素。
3：给浮动元素末尾添加空标签，给空标签添加clear:both，如下图：
注：会添加许多无意义的标签，增加结构负担，导致代码冗余。
4：给父元素添加display:table，如下图：
注：会改变父元素的元素类型。
5：伪元素清除法：::afte{content:"";display:block;clear: both;height:0;overflow: hidden;visibility: hidden;},如下图：
注：代码太多，不易记忆。
说明：这只是我的个人见解，不足的地方还请原谅。
来源：CSDN
作者：奋斗中的猿人
链接：https://blog.csdn.net/m0_46382643/article/details/104601341