CSS中绝对定位父元素高度塌陷问题

1 什么是高度塌陷？

谈到父元素高度塌陷，我们很容易想到 float (浮动)。在文档流中，父元素的高度默认由子元素撑开，即父元素的高度跟子元素高度一样 (默认情况下)。我们知道，当一个元素设置 float 后，会完全脱离文档流，脱离文档流的元素无法撑开父元素的高度，导致父元素的高度为 0，这就叫做高度塌陷。

正常代码

Copy




<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Document

.inner {
width: 200px;
height: 200px;
background-color: pink;
}









父元素的高度默认由子元素撑开，如下图。

开启 float 后
我们发现父元素的高度为 0 了

2 常见的高度塌陷问题的解决方案

2.1 给父元素添加固定高度

缺点：无法自适应子元素高度

2.2 给父元素设置 overflow

Copy
.outer {
overflow: hidden;
}

2.3 给父元素中添加一个伪元素

Copy
.outer::after {
content: '';
display: block;
clear: both;
}

3 绝对定位父元素高度塌陷问题解决方案

通常，我们遇到高度塌陷问题就会想到 float，就会直接使用 float 解决高度塌陷的解决方案。但是 float 与绝对定位导致的高度塌陷问题不相同，上述常见的三种解决方案中只有第一种才有效果。

前端小白的一些见解，难免会存在不足之处，若文章存在问题，欢迎大佬指出！！！