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 と絶対位置による高さの折りたたみの問題は異なり、上記の一般的な 3 つの解決策のうち、最初の解決策のみが効果があります。

フロントエンド初心者の見解には不足があるかもしれませんので、もし記事に問題がある場合は、ご指摘いただければ幸いです！！！