父级元素未设置高度和宽度时高度塌陷问题的解决方法

父级元素未设置高度和宽度时，如果其内部的子元素设置了浮动或者绝对定位等导致元素脱离文档流的属性，会造成父级元素高度塌陷问题。那么该如何解决父级元素高度塌陷的问题呢？下面我们提供两种具体的解决方法。

方法一：使用clearfix清除浮动

当子元素使用浮动属性后，父元素的高度无法被撑开，导致造成高度塌陷。此时可以使用clearfix这个类来进行清除浮动。

示例代码如下：

HTML：

<div class="parent">
  <div class="child left"></div>
  <div class="child right"></div>
  <div class="clearfix"></div>
</div>

CSS:

.parent {
  border: 1px solid #000;
}

.child {
  height: 100px;
  width: 100px;
}

.left {
  float: left;
  background-color: red;
}

.right {
  float: right;
  background-color: blue;
}

.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

在这段代码中，我们通过给父元素的内部最后增加一个class为clearfix的元素，来清除浮动，确保父元素的高度被正确撑开了。

方法二：使用display: flex布局

在父元素设置了display:flex的情况下，父元素内部的子元素会根据flex盒模型进行排列，并不会受到元素浮动等属性的干扰。这样能够很好地解决父元素高度塌陷的问题。

示例代码如下：

HTML:

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS:

.parent {
  display: flex;
  border: 1px solid #000;
}

.child {
  height: 100px;
  width: 100px;
}

.left {
  background-color: red;
}

.right {
  background-color: blue;
}

在这段代码中，我们给父元素设置了display:flex属性，子元素的浮动不会导致高度塌陷的现象，保证了父元素高度的正确展示。

使用以上两种方法可以很好地解决父元素高度塌陷的问题，具体使用哪种方法需要结合自己的实际情况选择。