什么是高度塌陷？
当父元素高度自适应，子元素浮动后，造成父元素高度为0，称为高度塌陷。
高度塌陷怎么解决？
方法一：给父元素一个固定的高度
缺点：给父元素固定高度违背了高度自适应的原则，不够灵活，不推荐使用。
方法二：给父元素添加属性 overflow: hidden;
优点：浏览器支持好，简单；
缺点：当子元素有定位属性时，设置 overflow: hidden; 容器以外的部分会被裁剪掉。
方法三：在子元素的末尾添加一个空的 div ，并设置下方样式
div{
clear: both;
height: 0;
overflow: hidden;
}
优点：所有浏览器都支持，并且容器溢出不会
在网页布局设计中，"高度塌陷"是一个常见的问题，特别是在使用浮动布局（float）时。高度塌陷指的是当一个父元素的子元素设置了浮动，而父元素本身没有设定固定高度，这会导致父元素无法自动扩展以包含这些浮动的子元素，从而使得父元素的高度计算为0。这种情况在需要动态高度的布局中尤为困扰，因为父元素无法正确包裹其内容，可能会影响到其他相邻元素的布局。
解决高度塌陷的方法多种多样，每种方法都有其优缺点：
1. **给父元素设定固定高度**：
这是最直观但不太理想的方法。通过为父元素指定一个具体的像素高度，可以确保它有一个明确的高度值。然而，这种方法的缺点在于它限制了父元素的高度自适应性，如果内容的多少发生变化，父元素可能会被溢出或者显示不完整。
2. **使用`overflow: hidden`**：
这个方法是通过在父元素上设置CSS属性`overflow: hidden`来解决高度塌陷。这样，即使子元素浮动，父元素也会包含它们。但是，当子元素使用绝对定位或相对定位时，`overflow: hidden`会隐藏超出父元素边界的任何内容，可能导致一些预期外的结果。
3. **添加清浮动的空div**：
在浮动子元素的末尾添加一个空的div，并设置CSS样式`clear: both; height: 0; overflow: hidden;`，可以强制父元素扩展到包含所有的浮动元素。这种方法在所有浏览器中都有效，但缺点是增加了额外的HTML元素，可能造成代码冗余。
4. **使用CSS伪元素清除浮动**：
也被称为"万能清除浮动法"，在父元素内部使用`:after`伪元素，设置如下样式：
```
父元素:after{
content: "";
height: 0;
clear: both;
overflow: hidden;
display: block;
visibility: hidden;
}
```
这种方法与添加空div类似，但不需要在HTML中增加额外的元素，保持代码更整洁，同时也能有效地解决高度塌陷问题，是推荐使用的解决方案。
在实际开发中，开发者通常会选择第四种方法，因为它既保持了代码的简洁性，又能确保兼容性，并且不会牺牲高度自适应性。同时，随着Flexbox和Grid布局的普及，高度塌陷的问题在现代布局系统中变得不那么突出，但在处理旧的或需要向后兼容的项目时，了解并掌握这些传统方法仍然是必要的。
