EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

CSSフロートとクリア

フロートは、FlexboxとGridが登場する前のCSSの主要なレイアウト方法でした。モダンレイアウトではFlexbox/Gridが優先されますが、フロートを理解することはまだ重要です——レガシーコードベースで遭遇することがあります。

フロートプロパティ早見表

プロパティ よく使う値 用途
float left、right、none フロートの方向
clear left、right、both、none フロート効果のクリア

フロートプロパティ

floatは要素をコンテナの片側に「浮かせ」、他のコンテンツがその周りに回り込みます。

サンプル

HTML 
<style>
.float-left {
  float: left;
  width: 120px;
  background: #e3f2fd;
  border: 1px solid #90caf9;
  padding: 10px;
}
.float-right {
  float: right;
  width: 120px;
  background: #fce4ec;
  border: 1px solid #f48fb1;
  padding: 10px;
}
</style>
<div class="float-left">左フロート</div>
<div class="float-right">右フロート</div>
<p>テキストがフロートされた要素の周りに回り込みます...</p>
▶ 試してみよう

フロートの動作

サンプル

HTML 
<style>
.container {
  border: 2px solid #333;
  padding: 10px;
}
.image {
  float: left;
  margin-right: 15px;
  margin-bottom: 10px;
  width: 150px;
  height: 100px;
  background: #e3f2fd;
}
</style>
<div class="container">
  <div class="image">画像</div>
  <p>テキストがフロートされた画像の周りに回り込みます。これはフロートが本来設計されていた古典的なテキスト回り込み効果です。テキストはフロートされた要素の自然に流れます。</p>
</div>
▶ 試してみよう

フロートの問題：高さの崩れ

すべての子要素がフロートされると、親が「包み忘れ」ます：

サンプル

HTML 
<style>
.parent {
  border: 2px solid red;
}
.child {
  float: left;
  width: 100px;
  height: 100px;
  background: #e3f2fd;
  border: 1px solid #1976d2;
}
</style>
<div class="parent">
  <div class="child">子1</div>
  <div class="child">子2</div>
</div>
▶ 試してみよう

結果：親のボーダーが上部に張り付き、子がオーバーフロー——フロートされた子はドキュメントフローのスペースを占有しないためです。

フロートのクリア

1. clearプロパティの使用（従来方法）

サンプル

HTML 
<div class="parent">
  <div class="child">コンテンツ</div>
  <div class="child">コンテンツ</div>
  <div style="clear: both;"></div>
</div>
▶ 試してみよう

2. 親のoverflow

サンプル

HTML 
<style>
.parent {
  overflow: hidden;
}
</style>
▶ 試してみよう

BFC（ブロック整形コンテキスト）の動作を利用します。

3. 疑似要素Clearfix（推奨）

標準的で推奨される方法：

サンプル

HTML 
<style>
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
</style>
<div class="parent clearfix">
  <div class="child" style="float: left;">コンテンツ</div>
  <div class="child" style="float: left;">コンテンツ</div>
</div>
▶ 試してみよう

モダンな代替手段：Flexbox

ほとんどのフロートレイアウトは、FlexboxまたはGridに置き換えることができます：

サンプル

HTML 
<style>
/* 旧方法：フロート */
.old-layout {
  overflow: hidden;
}
.old-layout .col {
  float: left;
  width: 33.33%;
}

/* モダン方法：Flexbox */
.modern-layout {
  display: flex;
}
.modern-layout .col {
  flex: 1;
}
</style>
▶ 試してみよう

❓ よくある質問

Q フロートはまだレイアウトに使用されますか？
A 推奨されません。フロートはテキスト回り込み用に設計されたもので、レイアウト用ではありません。FlexboxとGridはフロートレイアウトを完全に置き換えました。「画像 + テキスト回り込み」エフェクトにのみフロートを使用してください——これが現代の正しいユースケースです。
Q clearfixとは何ですか？
A clearfixはフロート効果をクリアするための古典的なハックです。親コンテナに`::after { content: ""; display: block; clear: both; }`を追加すると、フロートされた子を「包み込み」ます。FlexboxまたはGridでは、clearfixは不要です。
Q フロートの親の高さ崩れ怎么办？
A 高さ崩れは、フロートされた要素がドキュメントフローから離れるため発生します——親がその高さを検出できません。解決策：親に`overflow: hidden`を設定する、clearfixを使用する、またはFlexboxレイアウトに切り替えます。

📖 まとめ

📝 演習

  1. 画像が左にフロートされ、テキストがその周りに回り込む画像とテキストのページを作成してください。
  2. フロートを使用して「3カラムレイアウト」を実装してください——左200px、右200px、中央はアダプティブ。
  3. 「高さ崩れ」を実演し、少なくとも3つの方法（clearfix、overflow、疑似要素）で解決してください。
  4. フロートの3カラムレイアウトをFlexboxで書き直し、コードの違いを比較してください。
100%