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 與絕對定位導致的高度塌陷問題不相同，上述常見的三種解決方案中只有第一種才有效果。

前端小白的一些見解，難免會存在不足之處，若文章存在問題，歡迎大佬指出！！！