css盒子塌陷怎么修复

CSS盒子塌陷是一种常见的布局问题，通常会导致外层元素无法正确地包含内层元素的高度。比如，当我们给一个父元素添加了border或padding时，子元素的高度就会从父元素中撑开，导致父元素的高度小于子元素的高度。

为了修复这个问题，我们可以使用以下几种方法：

/* 1.使用浮动 */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.child {
  float: left;
}
/* 2.使用inline-block */
.parent {
  font-size: 0;
  /* 解决inline-block元素之间的空白间距问题 */
  letter-spacing: -0.31em;
}
.child {
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  /* 这里需要将字体大小还原为正常值 */
  letter-spacing: normal;
}
/* 3.使用flexbox */
.parent {
  display: flex;
  flex-wrap: wrap;
}
.child {
  flex: 1;
}
/* 4.使用grid布局 */
.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px;
}
.child {
  grid-column: span 1;
}
 

以上方法可以有效地解决CSS盒子塌陷的问题，根据实际需求选择不同的方法即可。