【CSS】floatの使い方！レイアウト崩れの原因とclearfixについても解説

CSSでレイアウトを作る際、一昔前に使われていたのがfloatプロパティです。

最近ではFlexboxやCSS Gridの登場により出番は減りましたが、「画像にテキストを回り込ませる」際に使われるので、使い方は覚えておきましょう。

この記事では、floatの基本から、セットで覚えるべき「clearfix」までを分かりやすく解説します。

floatプロパティとは？

floatは、指定した要素を「浮かせた状態」にして、左または右に寄せるプロパティです。

もともとは、新聞のように「画像にテキストを回り込ませる」ために作られました。

以前は全体的なレイアウトでも使用されていましたが、現在ではテキストを回り込ませる用途以外では使われません。

基本的な値

float: left;：要素を左に寄せ、後続の要素を右側に回り込ませる。
float: right;：要素を右に寄せ、後続の要素を左側に回り込ませる。
float: none;：回り込みを解除する（初期値）。

floatの基本的な使い方

例えば、画像（img）を左に寄せて、テキストを右に回り込ませるコードは以下のようになります。

<div class="container">
  <img src="https://picsum.photos/id/237/200/100" alt="サンプル画像" class="float-left">
  <p>ここには画像に回り込むテキストが入ります。floatを使うと、このように要素を左右に配置できます。ここには画像に回り込むテキストが入ります。floatを使うと、このように要素を左右に配置できます。ここには画像に回り込むテキストが入ります。floatを使うと、このように要素を左右に配置できます。</p>
</div>

.container {
  width: 400px
}
.float-left {
  float: left;
  margin-right: 15px; /* 画像とテキストの間に余白を作る */
  width: 200px;
}

Preview

floatでレイアウトが崩れるのは、親要素の「高さ」が消えるため

floatを使う上で必ず直面するのが、レイアウト崩れの問題です。

原因は、float（浮く）という言葉通り、要素が浮き上がってしまうため、親要素が「中に要素がない」と判断して高さ（height）を 0 にしてしまうからです。

親要素の高さが0になってしまうと、

親要素に設定した背景色が表示されない。
親要素の下に続くコンテンツが、浮いた要素の下に潜り込んでレイアウトが崩れる。

といった問題が発生します。

<div class="container">
  <img src="https://picsum.photos/id/237/200/100" alt="サンプル画像" class="float-left">
  <p class="float-right">ここのテキストにはfloat: rightが指定されています。</p>
</div>

.container {
  width: 500px;
  background-color: #eee;
}
.float-left {
  float: left;
  width: 200px;
}
.float-right {
  margin: 0;
  float: right;
  width: 280px;
}

Preview

上記の例では.containerに背景色#eeeを指定していますが、親要素containerの高さが0になっているので背景色が反映されていません。

解決策：clearfix（クリアフィックス）

この「高さがなくなる問題」を解決するための、最も一般的でスマートな方法がclearfixです。

親要素に対して「擬似要素（::after）」を作成し、CSSで自動的に回り込みを解除させます。

clearfixの書き方

以下のコードをCSSにコピー＆ペーストして使いましょう。

CSS

/* clearfixの定義 */
.clearfix::after {
  content: "";        /* 空の内容を作る */
  display: block;     /* ブロック要素にする */
  clear: both;        /* 左右の回り込みを解除する */
}

高さを認識させたい親要素のクラス名に、clearfixを追加するだけです。

<div class="container clearfix">
  <img src="https://picsum.photos/id/237/200/100" alt="サンプル画像" class="float-left">
  <p class="float-right">ここのテキストにはfloat: rightが指定されています。</p>
</div>

.container {
  width: 500px;
  background-color: #eee;
}
.float-left {
  float: left;
  width: 200px;
}
.float-right {
  margin: 0;
  float: right;
  width: 280px;
}
/* clearfixの定義 */
.clearfix::after {
  content: "";        /* 空の内容を作る */
  display: block;     /* ブロック要素にする */
  clear: both;        /* 左右の回り込みを解除する */
}

Preview

これで、親要素は子要素の高さ（浮いている分も含めて）を正しく認識し、レイアウト崩れを防ぐことができます。

現在の主流は？

モダンなWeb制作では、floatは以下の使い分けが推奨されています。

テキストの回り込み → float を使用
横並びのレイアウト（メニューやカラム） → Flexbox または CSS Grid を使用

floatで複雑なレイアウトを組むと、今回紹介したclearfixの管理が大変になるため、まずはFlexboxを学習することをおすすめします。

まとめ

floatは要素を左右に寄せ、後続を回り込ませる。
floatを使うと親要素の高さが消える。
それを防ぐために、親要素には clearfix を使うのが鉄則。
テキストを回り込ませる以外の用途では使われていない。

floatの仕組みを理解しておくと、古いコードの修正や、意図しないレイアウト崩れにも冷静に対処できるようになります。