CSS 入門

CSS float 浮動

CSSにおける float（浮動）と clear（解除）プロパティを使用すると、要素を横に並べたり、マルチカラムレイアウトを作成したり、画像の周りにテキストを回り込ませる効果を実現できます。

現在、複雑なレイアウトには Flexbox や Grid などのモダンな手法が推奨されますが、レガシーコードのメンテナンスや、テキストの回り込みといった特定のデザインシナリオを解決するために、フロートとクリアの理解は依然として非常に価値があります。

この章では、フロートとクリアの基礎知識をカバーし、それらの仕組みと効果的な活用方法をデモを交えて解説します。

1. Float プロパティの理解

float プロパティは、要素をそのコンテナの左側または右側に配置し、他のコンテンツ（通常はテキスト）をその周囲に回り込ませるために使用されます。フロート要素は通常の「文書流（Document Flow）」から外れます。これは、非フロート要素のように垂直方向のスペースを占有しなくなることを意味します。

1.1 基本的な使い方

float プロパティは以下の値を受け入れます。

  • left: 要素をコンテナの左側にフロートさせます。
  • right: 要素をコンテナの右側にフロートさせます。
  • none: 要素をフロートさせません（デフォルト値）。
  • inherit: 親要素から float の値を継承します。

例：画像へのテキスト回り込み

<div class="container">
  <img src="image.jpg" alt="サンプル画像" class="float-left">
  <p>これは画像の周りに回り込むテキストです。float プロパティを使用すると、画像を左側に配置し、テキストをその周囲に流し込むことができます。これは新聞のようなレイアウトを作成したり、コンテナ内で要素を整列させたりする際に非常に便利です。</p>
</div>
.container {
  width: 500px;
  border: 1px solid black;
  padding: 10px;
}
.float-left {
  float: left; /* 画像を左にフロートさせる */
  margin-right: 10px; /* テキストが密着しないよう、画像の右側に余白を追加 */
}

1.2 浮動（float）がレイアウトに与える影響

要素がフロートすると、それは通常の文書流から取り除かれます。非フロートのブロックレベル要素は、フロート要素が存在しないかのように振る舞い、その下に重なる可能性があります。しかし、それらのブロックレベル要素内にある「インラインコンテンツ（テキストなど）」は、フロート要素の存在を認識し、その周囲を回り込みます。

以下の例で考えてみましょう：

<div class="container">
  <div class="floated">Float Left</div>
  <div>これは通常の div です。</div>
</div>
.container {
  width: 300px;
  border: 1px solid black;
  padding: 10px;
}
.floated {
  float: left;
  width: 100px;
  height: 50px;
  background-color: lightblue;
}

何が起きているのか？

  1. .floated div が左にフロートします。
  2. 後続の通常の div はコンテナの全幅を占めようとするため、実際にはフロート要素の下側に重なります（背景やボーダーはフロート要素の背後まで伸びます）。
  3. しかし、通常の div 内部にあるテキストコンテンツはフロート要素を認識し、覆い隠されることなくその周囲を回り込み（wrap around）ます。

ポイント解析：
これはCSSにおけるよくある混乱のポイントです。「ブロックボックス（通常のdiv）」はフロート要素を無視して利用可能なスペースを埋めようとしますが、「インラインボックス（テキスト）」はフロート要素を避けるために短くなります。

1.3 浮動要素の包含 (Containing Floats)

親要素がフロートした子要素を「包含」するようにしたい場合があります。つまり、親要素の高さがフロート要素に合わせて自動的に調整される状態です。

問題： 親要素がフロート要素のみを含んでいる場合、デフォルトでは親要素の高さが 0 に崩れる（collapse） 現象が起きます。これにより、親要素の背景色やボーダーが正しく表示されなくなります。

この問題を解決する方法はいくつかあります：

1.3.1 overflow プロパティの使用

親要素の overflow プロパティを auto、scroll、または hidden に設定すると、フロート要素を包含するように強制されます（これは内部的に BFC（ブロック整形文脈） を作成するためです）。

.container {
  overflow: auto; /* または hidden, scroll */
}

1.3.2 clearfix クラス

これが最も一般的で堅牢な方法です。親要素に特定のクラス（通常は clearfix）を追加し、擬似要素（::after）を使用して、親要素の末尾にフロートを解除するための不可視のブロックを挿入します。

CSS コード：

.clearfix::after {
  content: "";
  display: table; /* または block */
  clear: both;    /* コア：左右のフロートを解除 */
}

.container {
  width: 300px;
  border: 1px solid black;
  padding: 10px;
}
.floated {
  float: left;
  width: 100px;
  height: 50px;
  background-color: lightblue;
}

HTML 構造：

<div class="container clearfix">
  <div class="floated">Float Left</div>
  <div>これは通常の div です。</div>
</div>

なぜ clearfix が推奨されるのか？

clearfix 手法は最も安全であるため、広く使われています。対照的に、overflow: auto や hidden は、状況によっては意図せずコンテンツを隠してしまったり、不要なスクロールバーが表示されたりする可能性があるからです。

2. Clear プロパティの理解

clear プロパティは、要素のどの側にフロート要素を許可しないかを指定します。これはフロート要素の周囲の要素の流れを制御するために使用され、通常、要素をフロート要素の下側に押し出すために使われます。

2.1 基本的な使い方

clear プロパティは以下の値を受け入れます。

  • left: 要素の左側にフロート要素を許可しません（左側に存在する場合、その要素は次の行に移動します）。
  • right: 要素の右側にフロート要素を許可しません。
  • both: 左右両側にフロート要素を許可しません（最も一般的）。
  • none: 両側にフロート要素を許可します（デフォルト）。

例：

<div class="container">
  <div class="floated">左フロート</div>
  <p class="clear">このテキストは、フロートした div の下に配置されます。</p>
</div>
.container {
  width: 300px;
  border: 1px solid black;
  padding: 10px;
}
.floated {
  float: left;
  width: 100px;
  height: 50px;
  background-color: lightblue;
}
.clear {
  clear: left; /* この段落が左フロート要素の下に表示されるようにする */
}

この例では、clear クラスを持つ段落に clear: left が適用されています。これにより、段落は左側のフロート要素の下に配置され、floated div の周りに回り込むのを防ぎます。

2.2 異なる方向のフロート解除

フロート要素の方向に応じて、正しい clear の値を選択することが重要です。

  • 左フロートを解除する場合は、clear: left。
  • 右フロートを解除する場合は、clear: right。
  • 両方向のフロートを解除する必要がある場合は、clear: both。

シーン例：

<div class="container">
  <div class="float-left">左フロート</div>
  <div class="float-right">右フロート</div>
  <p class="clear">この段落は、両方のフロート要素の下に配置されます。</p>
</div>
.container {
  width: 500px;
  border: 1px solid black;
  padding: 10px;
}
.float-left {
  float: left;
  width: 150px;
  height: 50px;
  background-color: lightblue;
}
.float-right {
  float: right;
  width: 150px;
  height: 50px;
  background-color: lightcoral;
}
.clear {
  clear: both; /* 左右両方のフロートを解除 */
}

3. 実戦的なサンプルとデモ

3.1 シンプルな2カラムレイアウト

フロートを使用すると、カラムレイアウトを簡単に作成できます。

.container {
  width: 600px;
  border: 1px solid black;
  overflow: auto; /* フロートを包含し、高さの崩れを防ぐ */
}
.column {
  width: 48%; /* 余白を考慮して 50% より少し小さく設定 */
  margin: 1%;
  padding: 10px;
  border: 1px solid gray;
  box-sizing: border-box;
}
.left { float: left; }
.right { float: right; }
<div class="container">
  <div class="column left">
    <h2>左カラム</h2>
    <p>これは左カラムの内容です。</p>
  </div>
  <div class="column right">
    <h2>右カラム</h2>
    <p>これは右カラムの内容です。</p>
  </div>
</div>

3.2 ナビゲーションバー

現在は Flexbox が適していますが、フロートは伝統的な手法です。

<nav class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
.nav {
  background-color: #333;
  overflow: auto; /* フロートを包含 */
}
.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav li {
  float: left;
}
.nav a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.nav a:hover {
  background-color: #ddd;
  color: black;
}

この例では、リスト項目（li）を左にフロートさせることで、水平なナビゲーションバーを作成しています。.nav 要素の overflow: auto により、親コンテナがこれら浮動するリスト項目を正しく包含（高さ崩れを防止）しています。

注意： これはあくまで基礎的な例です。より複雑なナビゲーションバーでは、レイアウトの制御能力とレスポンシブ性に優れた Flexbox や Grid レイアウトを使用するのが一般的です。