• ホーム
  • Web制作
  • CSSのfloatとは？回り込み・clearfix・Flexboxの使い分けを初心者向けに解説

CSSのfloatとは？回り込み・clearfix・Flexboxの使い分けを初心者向けに解説

Web制作
コードが書かれたモニター

CSSのfloatは、要素を左や右に寄せて、周囲のテキストを回り込ませるためのプロパティです。

昔のWeb制作では、2カラム・3カラムレイアウトや横並びメニューにもよく使われていました。

現在ではページ全体のレイアウトにはFlexboxやCSS Gridを使うことが多くなっていますが、古いサイトの保守や既存CSSの修正では、今でもfloatに出会うことがあります。

この記事では、CSSのfloatの基本、回り込みの解除、clearfix、floatでレイアウトが崩れる原因、Flexboxとの使い分けを初心者向けに解説します。

関連記事：CSS calc()の使い方と実務例！よくあるレイアウトパターンも紹介

floatとは

floatは、要素を左または右に寄せ、その周囲にテキストやインライン要素を回り込ませるCSSプロパティです。

たとえば、画像を左に配置して、その右側に文章を回り込ませたい場合に使えます。

.image {
  float: left;
  margin-right: 20px;
}

HTMLは次のようになります。

<img src="sample.jpg" alt="" class="image">
<p>ここに文章が入ります。画像の右側にテキストが回り込みます。</p>

このように、floatは本来、画像などの周囲に文章を回り込ませるために使うのが自然です。

参考：MDN：float

floatの基本値

floatでよく使う値は次の通りです。

値 意味
left 要素を左に寄せる
right 要素を右に寄せる
none 回り込みを行わない
inline-start 文章の開始方向へ寄せる
inline-end 文章の終了方向へ寄せる

一般的な日本語サイトでは、leftとrightを見かけることが多いです。

float:leftの例

画像を左に寄せて、文章を右側に回り込ませる例です。

.float-left {
  float: left;
  margin: 0 20px 20px 0;
}
<img src="sample.jpg" alt="" class="float-left">
<p>画像の右側に文章が回り込みます。ニュース記事やプロフィール紹介などで使われることがあります。</p>

画像と文章の間に余白を作るため、marginも一緒に指定すると見やすくなります。

float:rightの例

画像を右に寄せる場合は、float: right; を使います。

.float-right {
  float: right;
  margin: 0 0 20px 20px;
}
<img src="sample.jpg" alt="" class="float-right">
<p>画像の左側に文章が回り込みます。レイアウトに変化を付けたいときに使えます。</p>

右寄せの場合は、左側に余白を作るため、margin-leftを指定します。

floatでよく起きる問題

floatでよくあるトラブルが、親要素の高さがなくなる問題です。

たとえば、次のようなHTMLがあるとします。

<div class="box">
  <div class="item">左</div>
  <div class="item">右</div>
</div>

CSSは以下です。

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

この場合、子要素がfloatしているため、親要素.boxが子要素の高さを認識できず、高さがつぶれたように見えることがあります。

その結果、次の要素が上に詰まってしまい、レイアウトが崩れることがあります。

floatを解除するclear

floatの回り込みを解除するには、clearを使います。

.clear {
  clear: both;
}

HTMLでは、floatした要素の後に解除用の要素を置く方法があります。

<div class="box">
  <div class="item">左</div>
  <div class="item">右</div>
  <div class="clear"></div>
</div>

ただし、解除用の空要素をHTMLに追加する方法は、現在ではあまりおすすめしません。HTML構造が装飾目的の要素で増えてしまうためです。

clearfixでfloatを解除する

古いサイトでよく使われているのが、clearfixです。親要素に疑似要素を使って、floatを解除します。

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

HTMLでは、親要素にclearfixクラスを付けます。

<div class="box clearfix">
  <div class="item">左</div>
  <div class="item">右</div>
</div>

これで、親要素がfloatした子要素の高さを含むようになります。既存サイトの保守では、このclearfixが今でもよく出てきます。

overflow:hiddenで解除する方法

昔は、親要素にoverflow: hidden;を指定してfloatを解除する方法も使われていました。

.box {
  overflow: hidden;
}

たしかに親要素の高さを確保できることがあります。

ただし、はみ出した要素が隠れてしまうため、ドロップダウンメニューや装飾が切れる原因になることがあります。そのため、安易にoverflow: hidden;で解決しようとするのは注意が必要です。

floatで横並びレイアウトを作る例

昔のWeb制作では、floatを使ってカラムレイアウトを作ることがよくありました。

.content {
  float: left;
  width: 70%;
}

.sidebar {
  float: right;
  width: 28%;
}

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

HTMLは次のようになります。

<div class="wrapper">
  <main class="content">メインコンテンツ</main>
  <aside class="sidebar">サイドバー</aside>
</div>

このようなレイアウトは、現在でも古いテーマや既存サイトで見かけます。ただし、新規で作るなら、FlexboxやGridを使った方が管理しやすいです。

現在はFlexboxやGridを使うのが基本

現在のWeb制作では、横並びレイアウトにはFlexboxを使うことが多いです。

たとえば、2カラムレイアウトなら次のように書けます。

.wrapper {
  display: flex;
  gap: 24px;
}

.content {
  flex: 1;
}

.sidebar {
  width: 300px;
}

floatよりも直感的で、親要素の高さがつぶれる問題も起きにくいです。

さらに複雑なグリッドレイアウトなら、CSS Gridも便利です。

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

新規制作では、基本的に以下のように考えるとよいです。

用途 おすすめ
画像に文章を回り込ませる float
横並びメニュー Flexbox
2カラムレイアウト Flexbox / Grid
カード一覧 Grid
古いサイトの修正 既存CSSに合わせてfloatも使用

参考：MDN：フレックスボックス

floatを使うべき場面

現在でも、floatを使ってよい場面はあります。代表的なのは、文章の中に画像を回り込ませたい場合です。

  • 記事内の画像に文章を回り込ませる
  • プロフィール画像の横に説明文を入れる
  • 既存サイトのfloatレイアウトを修正する
  • 古いCSSに合わせて部分修正する

floatは完全に不要になったわけではありません。ただし、ページ全体のレイアウト目的で新しく使う場面は減っています。

floatを使わない方がよい場面

以下のような用途では、floatよりFlexboxやGridの方が向いています。

  • グローバルナビの横並び
  • カード型レイアウト
  • レスポンシブ対応のカラムレイアウト
  • 中央寄せを含む複雑な配置
  • 高さを揃えたいボックス配置

floatで無理に作ろうとすると、clearfixや幅調整が増えて、管理が大変になりがちです。

floatで崩れたときの確認ポイント

floatを使ったレイアウトが崩れたときは、次の点を確認しましょう。

  1. 親要素にclearfixが入っているか
  2. floatした要素の合計幅が100％を超えていないか
  3. marginやpaddingを含めた幅を確認したか
  4. box-sizing: border-box; が指定されているか
  5. 次の要素に回り込みが影響していないか
  6. レスポンシブ時にfloatを解除しているか

特にスマホ表示では、floatを解除することが多いです。

@media screen and (max-width: 768px) {
  .content,
  .sidebar {
    float: none;
    width: 100%;
  }
}

PCでは横並び、スマホでは縦並びにする場合は、メディアクエリでfloat: none;を指定します。

まとめ

floatは、要素を左や右に寄せて、文章を回り込ませるためのCSSプロパティです。

昔はレイアウト全体にもよく使われていましたが、現在はFlexboxやGridを使う場面が増えています。

覚えておきたいポイントは次の通りです。

  • float: left;で左寄せ
  • float: right;で右寄せ
  • floatした要素は親の高さに影響しにくい
  • clearfixで回り込みを解除できる
  • 新規レイアウトにはFlexboxやGridが向いている
  • 既存サイトの保守ではfloatの理解が必要

floatは古い技術というより、「用途が限定されたCSS」と考えると分かりやすいです。

文章の回り込みにはfloat。
レイアウト全体にはFlexboxやGrid。

この使い分けを意識すると、CSSの保守やリライトがぐっと楽になると思います。

CSS HTML Web制作

関連する記事