css元素塌陷问题解决方案

CSS元素塌陷问题是指当一个父元素包含了一些浮动的子元素，并且这些子元素的高度超过了父元素的高度时，父元素的高度将会塌陷，导致页面布局出现问题。解决这个问题的方法有多种，下面列举两种常用的方法：

1. 使用清除浮动的技巧：在父元素的末尾添加一个空的块元素（如div）并设置clear属性为both。这样可以清除浮动，使父元素的高度包含所有子元素的高度。

<div class="parent">
  <div class="child float-left"></div>
  <div class="child float-left"></div>
  <div class="clear"></div>
</div>

<style>
  .float-left {
    float: left;
  }
  .clear {
    clear: both;
  }
</style>

2. 使用Flex布局：使用Flex布局可以让父元素自适应子元素的高度，从而解决元素塌陷的问题。

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

<style>
  .parent {
    display: flex;
    flex-wrap: wrap;
  }
  .child {
    flex-basis: 50%;
  }
</style>

以上两种方法均能有效解决元素塌陷的问题，具体使用哪种方法取决于实际情况。