CSS: CSSフロートとクリア
最終更新：2026-10-13
フロートは、FlexboxとGridが登場する前のCSSの主要なレイアウト方法でした。モダンレイアウトではFlexbox/Gridが優先されますが、フロートを理解することはまだ重要です——レガシーコードベースで遭遇することがあります。
フロートプロパティ早見表
| プロパティ | よく使う値 | 用途 |
|---|---|---|
float |
left、right、none |
フロートの方向 |
clear |
left、right、both、none |
フロート効果のクリア |
1. フロートプロパティ
floatは要素をコンテナの片側に「浮かせ」、他のコンテンツがその周りに回り込みます。
▶ サンプル
▶ 試してみよう(1) フロートの動作
▶ サンプル
▶ 試してみよう2. フロートの問題：高さの崩れ
すべての子要素がフロートされると、親が「包み忘れ」ます：
▶ サンプル
▶ 試してみよう結果：親のボーダーが上部に張り付き、子がオーバーフロー——フロートされた子はドキュメントフローのスペースを占有しないためです。
3. フロートのクリア
(1) clearプロパティの使用（従来方法）
▶ サンプル
▶ 試してみよう(2) 親のoverflow
▶ サンプル
▶ 試してみようBFC（ブロック整形コンテキスト）の動作を利用します。
(3) 疑似要素Clearfix（推奨）
標準的で推奨される方法：
▶ サンプル
▶ 試してみよう4. モダンな代替手段：Flexbox
ほとんどのフロートレイアウトは、FlexboxまたはGridに置き換えることができます：
▶ サンプル
▶ 試してみよう❓ よくある質問
Q フロートはまだレイアウトに使用されますか？
A 推奨されません。フロートはテキスト回り込み用に設計されたもので、レイアウト用ではありません。FlexboxとGridはフロートレイアウトを完全に置き換えました。「画像 + テキスト回り込み」エフェクトにのみフロートを使用してください——これが現代の正しいユースケースです。
Q clearfixとは何ですか？
A clearfixはフロート効果をクリアするための古典的なハックです。親コンテナに
::after { content: ""; display: block; clear: both; }を追加すると、フロートされた子を「包み込み」ます。FlexboxまたはGridでは、clearfixは不要です。Q フロートの親の高さ崩れ怎么办？
A 高さ崩れは、フロートされた要素がドキュメントフローから離れるため発生します——親がその高さを検出できません。解決策：親に
overflow: hiddenを設定する、clearfixを使用する、またはFlexboxレイアウトに切り替えます。📖 まとめ
- フロートはかつてCSSの主要なレイアウト方法でしたが、現在はFlexboxとGridに大きく置き換えられています
- フロートの核心的な問題は「高さ崩れ」——古典的な修正方法はclearfix疑似要素です
- 新規プロジェクトではFlexboxまたはGridを使用し、テキスト回り込みエフェクトにはフロートがまだ最適です
📝 練習問題
- 画像が左にフロートされ、テキストがその周りに回り込む画像とテキストのページを作成してください。
- フロートを使用して「3カラムレイアウト」を実装してください——左200px、右200px、中央はアダプティブ。
- 「高さ崩れ」を実演し、少なくとも3つの方法（clearfix、overflow、疑似要素）で解決してください。
- フロートの3カラムレイアウトをFlexboxで書き直し、コードの違いを比較してください。
