CSS 清除浮动，解决父元素包含浮动的子元素时，父元素的高度会塌陷的问题

网页布局中，浮动（float）常用于使元素在页面上并排显示。但有时我们会遇到一个问题：当父元素包含浮动的子元素时，父元素的高度会塌陷，因为它无法“包裹”这些浮动的元素。这时，我们需要清除浮动来解决这个问题。

什么是浮动塌陷？

当一个父元素内部的所有子元素都使用了 float 属性时，父元素会认为它内部没有任何内容，导致它的高度变为 0。这种情况就叫做“浮动塌陷”。

解决方案

通过伪元素（:before 和 :after）来创建一个额外的块级元素，强制父元素包含浮动的子元素。

示例：

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

/* IE 6/7 */
.clearfix {
  zoom: 1;
}

使用 :before 和 :after 在父元素的前后插入空内容，配合 display: table 来生成块级上下文。content: “” 是为了插入一个空的内容，伪元素需要有内容才能显示。