CSSのfloat解除は後続要素のclearと親要素のclearfixを使い分ける

公開日：2013年3月25日執筆：佐藤

「floatを解除する」と呼ばれる作業は、一つではありません。次の内容をfloatの下から始めたいなら、後続のブロックへclearを指定します。親要素の背景や枠を、floatした子要素の下端まで伸ばしたいなら、親要素へclearfixを指定します。

clearは、先行する要素のfloatをnoneへ戻すプロパティではありません。回り込みを止める対象と、親の高さを確保する対象を分けると、変更する要素を間違えずに済みます。

float: noneとclearは変更する要素が違う

要素自身を浮動させない場合は、その要素へfloat: noneを指定します。たとえば、横並びの項目を狭い画面で縦並びへ戻すなら、各項目のfloatを変更します。

一方、clearは、先にあるfloatの横へ後続のブロックを置かないための指定です。CSS 2.1のfloatに関する規則では、floatした箱は通常フローから外れますが、その横にある行ボックスはfloatの幅に合わせて短くなります。clearは、この回り込みを受ける後続側に働きます。

したがって、目的が「項目を浮動させない」ならfloat: noneです。目的が「次の内容をfloatの下から始める」ならclearです。

次のHTMLとCSSは、clearの働きを説明する仮例です。実在するサイトのコードではありません。

<div class="item">項目A</div>
<div class="item">項目B</div>
<div class="next-section">次の内容</div>

.item {
  float: left;
  width: 50%;
}

.next-section {
  display: block;
  clear: both;
}

.next-sectionは、左右どちらのfloatとも横に並ばず、その下から始まります。clearプロパティの定義では、leftは左float、rightは右float、bothは左右両方のfloatより下へ、対象となるブロックの上辺を送ります。

clearが対象にするのは、ソース上で先にあり、同じブロック整形コンテキストに参加するfloatです。別のブロック整形コンテキストにあるfloatや、対象要素自身の内側にあるfloatは考慮しません。

親要素がfloatした子要素だけを持ち、overflowがvisibleの通常ブロックである場合、親の背景や枠が子の下端まで伸びないことがあります。通常フローにあるブロックの高さ計算では、heightがautoのとき、floatした子は通常フローの子として数えません。

この場合は、親要素の内側の最後に、clearを持つブロックを生成します。

<div class="item-list clearfix">
  <div class="item">項目A</div>
  <div class="item">項目B</div>
</div>

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

:beforeと:afterの定義では、生成された箱は、対象要素の内側へ実在する要素が挿入されたように働きます。上の:afterはブロックとして生成され、左右のfloatより下へ移動します。その箱が親要素の通常フローに入るため、親の高さはfloatした子の下まで届きます。

clearfixはCSSプロパティの名前ではなく、この生成ボックスで親の高さを確保する書き方です。classはfloatした子ではなく、それらを囲む親へ付けます。

親へoverflow: hiddenまたはoverflow: autoを指定する方法もあります。overflowがvisible以外のブロックは、新しいブロック整形コンテキストを作ります。その高さの計算規則では、同じコンテキストに参加するfloatの下端も高さへ含めます。

ただし、overflowはfloatだけのための指定ではありません。overflowプロパティの定義によれば、hiddenは箱からはみ出す内容を切り取り、autoは必要に応じてスクロールの仕組みを設けます。影、画像、配置した部品が親からはみ出す設計では、表示まで変わる可能性があります。

親の表示範囲を変える理由がなければ、clearfixの方が目的をコードから読み取りやすくなります。親を独立したブロック整形コンテキストにする必要があり、はみ出す内容の扱いも決まっている場合に限り、overflowを選びます。