html中父级盒子高度塌陷

在HTML和CSS布局中，父级元素的高度塌陷（也称为"浮动塌陷"或"clearing problem"）通常发生在浮动元素（如`<div>`元素设置了`float`属性）作为直接子元素并且没有其他内容撑起父元素高度的情况下。当子元素浮动后，它会从普通文档流中移除，导致父元素高度变为0，因为它没有非浮动的内容去影响其高度。

解决这个问题常见的方法有：

1. **给父元素添加`overflow`属性**：设置`overflow: auto;`或`overflow: scroll;`可以让父容器显示滚动条，并自动计算包含所有内容后的高度。

<div class="parent">
  <div style="float: left;">...浮动子元素...</div>
</div>

<style>
.parent {
  overflow: auto;
}
</style>

2. **使用clearfix技术**：这是一种利用伪元素清除浮动的CSS技巧，创建一个新的块级元素（如`.clearfix::after`），并将它的内容高度设为0，同时设置`clear:both`。

<div class="parent clearfix">
  <div style="float: left;">...浮动子元素...</div>
</div>

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

/* 另一种实现方式 */
.parent:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}
</style>

3. **使用 Flexbox 或 Grid 布局**：现代浏览器支持Flexbox和Grid布局，它们可以更好地处理空间分配，避免了高度塌陷的问题。

<div class="parent flex-container">
  <div style="float: left;">...浮动子元素...</div>
</div>

<style>
.parent {
  display: flex;
}
</style>