【6日でできるHTML＆CSS入門】回り込みの問題点

　floatプロパティによる回り込みは、要素を横に並べたり画像の脇にテキストを回り込ませたりできる便利なCSS機能です。しかし、floatには大きな落とし穴やトラブルが存在することも覚えておく必要があります。
　特に、「意図した通りに要素が表示されない」「一部の要素が消えてしまう」といった現象が、floatの仕組みを十分に理解していない場合によく発生します。
ここでは、回り込みの問題点と、その解決策について、サンプルコードとともにわかりやすく解説します。

１．floatによる回り込みの主な問題点

1.1. floatしていない要素が隠れる・重なってしまう

floatを指定した要素と、floatを指定しない通常のブロック要素が混在した場合、
floatなしの要素が「背後」に隠れてしまう（重なって見えない）現象が発生することがあります。

ファイル名： lesson34_1.html（問題例）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>回り込みの問題例</title>
  <style>
    .box1, .box2, .box3 {
      width: 140px;
      height: 80px;
      border: 4px solid #e57373;
      font-size: 1em;
      line-height: 80px;
      text-align: center;
      margin-bottom: 10px;
      margin-right: 8px;
      float: none;
    }
    .box1 { background: #fffde7; float: left; }
    .box2 { background: #e1f5fe; float: left; }
    .box3 { background: #d1c4e9; color: #5e35b1; }
  </style>
</head>
<body>
  <div class="box1">ボックス1</div>
  <div class="box2">ボックス2</div>
  <div class="box3">ボックス3（表示されない）</div>
</body>
</html>

表示結果

「ボックス1」「ボックス2」は横に並んで表示される。
「ボックス3」は背後に隠れて見えなくなる（横に並ばず、floatの下にも表示されない）。

1.2. 問題が発生する理由

　floatを指定した要素は「文書の通常のフロー」から外れ、浮き上がった（浮動）状態になります。
　そのため、floatしていない要素（通常フローの要素）は、その「浮動要素」の下に回り込むことができず、前のfloat要素の裏に隠れてしまうことがあります。

要素の状態	表示のされ方
float指定	横並び・浮動（上に重なる）
float指定なし	通常フロー、float要素に隠れる。

２．floatによる回り込みの問題点への対策

2.1. clearプロパティで回り込みを解除する

clearプロパティを使うことで、floatの影響を受けなくなり、「次の行」から表示されるようにできます。

値	意味
left	float: left の回り込みを解除
right	float: right の回り込みを解除
both	両方の回り込みを解除

ファイル名： lesson34_2.html（clearによる解決）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>回り込みのclearでの解除例</title>
  <style>
    .box1, .box2, .box3 {
      width: 140px;
      height: 80px;
      border: 4px solid #e57373;
      font-size: 1em;
      line-height: 80px;
      text-align: center;
      margin-bottom: 10px;
      margin-right: 8px;
    }
    .box1 { background: #fffde7; float: left; }
    .box2 { background: #e1f5fe; float: left; }
    .box3 { background: #d1c4e9; color: #5e35b1; clear: both; }
  </style>
</head>
<body>
  <div class="box1">ボックス1</div>
  <div class="box2">ボックス2</div>
  <div class="box3">ボックス3（clearで下に表示）</div>
</body>
</html>

表示結果

「ボックス1」「ボックス2」は横並び。
「ボックス3」は、2つのfloat要素の下にしっかり表示される。

2.2. clearfix（clearfixクラス）を活用する

複数のfloat要素をグループ化したい場合、「clearfix」というテクニックが有効です。

clearfixクラスの例

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

ファイル名： lesson34_3.html（clearfixの利用）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>clearfixによるfloat解除</title>
  <style>
    .wrapper { border: 2px dashed #ff9800; padding: 10px; margin-bottom: 10px; }
    .floatbox {
      float: left;
      width: 110px;
      height: 70px;
      background: #ffecb3;
      border: 2px solid #ffa726;
      margin-right: 10px;
      text-align: center;
      line-height: 70px;
      font-size: 1em;
    }
    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }
    .afterbox {
      border: 2px solid #00897b;
      background: #e0f2f1;
      height: 70px;
      line-height: 70px;
      text-align: center;
      margin-top: 8px;
      color: #00897b;
    }
  </style>
</head>
<body>
  <div class="wrapper clearfix">
    <div class="floatbox">A</div>
    <div class="floatbox">B</div>
  </div>
  <div class="afterbox">float解除後のボックス</div>
</body>
</html>

表示結果

「A」「B」は横並び（float）。
「float解除後のボックス」は、しっかりその下に表示される。

３．floatの問題点に関するタグ・CSSプロパティ一覧

タグ・プロパティ	説明
`<div>`	ブロック要素（グループ化・float適用に多用）
`float`	要素の回り込みを指定
`clear`	float解除（影響を受けず新たな行に表示）
`.clearfix::after`	float要素群の下に空要素を追加しfloatを解除
`margin`	要素間の余白
`border`	枠線
`background`	背景色

まとめ

　floatによる回り込みは、便利な反面、思わぬ表示崩れや要素の重なり、消失といったトラブルが起こりやすい手法です。
clearプロパティやclearfixテクニックを正しく活用し、floatの影響範囲をしっかり制御することが大切です。
　現在はflexboxやgridなどより強力で直感的なレイアウト手法もありますが、floatの挙動はWeb制作の基礎知識として必ず押さえておきましょう。