clearfixとは。

clearfixとは、floatを使ったときに崩れるレイアウトを直すためのCSSテクニックです。
⸻

■ なぜ必要なのか（前提）

floatを使うと、要素が「浮いた状態」になるため、
* 親要素が中身の高さを認識できない
* 結果としてレイアウトが崩れる
という問題が起きます。
⸻

■ clearfixとは何をするもの？

一言でいうと：
「floatの影響を親要素の最後でリセットする仕組み」
です。
⸻

■ 典型的な書き方
.clearfix::after {
 content: "";
 display: block;
 clear: both;
}
⸻

■ 各部分の意味

● ::after
→ 要素の「最後に見えない要素を追加」

● content: ""
→ 空の要素を作る

● display: block
→ ブロック要素として扱う

● clear: both
→ 左右どちらのfloatの影響も解除する
⸻


■ 何が起きているか（イメージ）

floatがあると：
親要素
├─ 画像（float）
└─ テキスト（回り込み）
↓
親の高さが消える
clearfixを入れると：
親要素
├─ 画像（float）
└─ テキスト
└─ 見えない解除要素（clear）
↓
親の高さがちゃんと戻る
⸻

■ 今の実務での扱い

昔：
* float + clearfixが必須
今：
* FlexboxやGridでほぼ不要
⸻

■ まとめ

clearfixとは：
floatによるレイアウト崩れを防ぐために、親要素の最後で回り込みを解除する仕組み