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

1 什么是高度塌陷？#

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

正常代码

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
				content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		.inner {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="outer">
		<div class="inner"></div>
	</div>
</body>
</html>

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

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

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

2.1 给父元素添加固定高度#

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

2.2 给父元素设置 overflow#

.outer {
    overflow: hidden;
}

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

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

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

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

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