理解

当父元素未设置高度时，所有子元素浮动后，子元素会脱离文档流从而导致无法把父元素撑开，父元素的高度为0，称为高度塌陷

解决方案

为父元素设置高度
触发BFC：计算高度时，浮动元素也会参与计算
添加空块级标签，并设置 clear:both
使用伪元素 after

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      border: 5px solid #000;
    }
    .box {
      width: 50px;
      height: 50px;
    }
    .box1 {
      background-color: red;
      float: left;
    }
    .box2 {
      background-color: green;
      float: left;
    }
    

    /* 创建BFC，可以解决该问题 */
    .container-bfc {
      overflow: auto;
    }

    /* 空元素设置 clear 类 */
    .clear {
      clear: both;
    }

    /* 父级添加伪元素 */
    .container-after::after {
      content: '';
      clear: both;
      display: block;
      zoom: 1;
    }

    /* 父级设置高度 */
    .container-height {
      height: 50px;
    }
   
  </style>
</head>
<body>
  <p>塌陷</p>
  <div class="container">
    <div class="box box1"></div>
    <div class="box box2"></div>
  </div>

  <!-- 清除浮动，避免影响下面的demo -->
  <div style="clear: both;"></div>

  <p>解决塌陷---BFC</p>
  <div class="container container-bfc">
    <div class="box box1"></div>
    <div class="box box2"></div>
  </div>

  <p>解决塌陷---空元素</p>
  <div class="container">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="clear"></div>
  </div>

  <p>解决塌陷---伪元素</p>
  <div class="container container-after">
    <div class="box box1"></div>
    <div class="box box2"></div>
  </div>

  <p>解决塌陷---设置高度</p>
  <div class="container container-height">
    <div class="box box1"></div>
    <div class="box box2"></div>
  </div>


</body>
</html>

CSS-高度塌陷

理解

解决方案