css中的高度塌陷

CSS高度塌陷（或称为高度坍塌）是指在某些特定情况下，元素的高度无法被正确计算或显示的现象。这通常发生在具有浮动属性的元素或使用绝对定位的元素周围。

原因

高度塌陷通常发生在父元素包含着一个或多个浮动元素时。由于浮动元素被移出了正常的文档流，父元素无法正确计算其高度，导致父元素高度塌陷。

产生高度塌陷的原因通常有两种情况:

子元素使用了浮动或者绝对定位，导致父元素无法计算出子元素的高度。
当父元素的高度没有设置时，父元素的高度会自动调整为0，从而导致子元素的高度也变为0。

html 复制代码

 <style>
    .father{
      border: 1px solid;
    }
    .son{
      width: 100px;
      height: 100px;
      background-color: red;
      /* 以下两个情况会使子元素脱离文档流 从而使父元素高度塌陷 */
      /* position: absolute;  */
      float: left; 
    }
  </style>


<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>

页面显示

如何解决？

使父元素也脱离文档流

使用浮动布局：将父元素也设置为浮动，这样它会自动计算和包含浮动元素的高度。

css 复制代码

    .father{
      border: 2px solid blue;
      /* 使父元素也脱离文档流 */
      float: left;
    }
    .son{
      width: 100px;
      height: 100px;
      background-color: red;
      /* 以下两个情况会使子元素脱离文档流 从而使父元素高度塌陷 */
      /* position: absolute;  */
      float: left; 
    }

当子元素是因为浮动的原因产生问题的时候，我们也可以使用overflow: hidden 来解决

css 复制代码

overflow: hidden;

清除浮动(推荐)

在浮动元素后面添加一个带有clear属性的空元素，使其在浮动元素下面，从而触发父元素重新计算高度。在父元素上添加 clearfix类名，并在需要清除浮动的子元素前添加一个带clearfix::after伪元素的样式。

html 复制代码

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

<div class="father clearfix">
    <div class="son"></div>
</div>

使用flex布局

使用flexbox布局可以自动解决高度塌陷问题。

css 复制代码

.father {
   border: 2px solid blue;
   display: flex;
}

以上是一些常见的解决高度塌陷问题的方法，具体应该根据实际情况选择适合的方法,还有哪些方法呢欢迎补充。