[分享]css中如何解决高度塌陷

在 CSS 中，高度塌陷是一个常见的问题。它指的是块级元素中的子元素不足以将其撑起，导致该块级元素的高度变成 0 的情况。解决高度塌陷问题有多种方法。以下是其中几种常见的方法：/ 方法一：使用浮动 /...

在 CSS 中，高度塌陷是一个常见的问题。它指的是块级元素中的子元素不足以将其撑起，导致该块级元素的高度变成 0 的情况。

解决高度塌陷问题有多种方法。以下是其中几种常见的方法：

/* 方法一：使用浮动 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.box {
  float: left;
  width: 50%;
} 

方法一是使用浮动来解决高度塌陷问题。需要在包含子元素的块级元素上添加一个伪元素，然后给子元素添加浮动。

/* 方法二：使用 BFC */
.box {
  display: inline-block;
  width: 100%;
  overflow: hidden;
} 

方法二是使用 BFC（块级格式化上下文）来解决高度塌陷问题。需要在包含子元素的块级元素上使用 overflow: hidden 或者 display: inline-block 来触发 BFC。

/* 方法三：使用 Flexbox */
.container {
  display: flex;
  flex-wrap: wrap;
}
.box {
  flex-basis: 50%;
} 

方法三是使用 Flexbox 布局来解决高度塌陷问题。需要在包含子元素的父级元素上使用 display: flex，并通过 flex-basis 或者 flex-grow 来设置子元素的宽度。

以上是解决高度塌陷问题的几种常见方法，具体使用取决于布局需求和浏览器支持情况。