【CSS】floatは古い？今も使う場面やFlexbox・Gridへの移行法

CSSを学んでいると、昔の記事や古いテンプレートでfloat: left;やfloat: right;を見かけることがあります。一方で、最近の教材ではFlexboxやGridがよく使われるため、「floatは古いの？」「今から覚える必要はあるの？」と迷う方も多いはずです。結論からいうと、floatは現在でもCSSの正式なプロパティですが、ページ全体のレイアウトを作る目的では古い書き方と考えてよいです。

この記事では、floatの本来の役割、古いといわれる理由、今でも使える場面、FlexboxやGridへの置き換え方まで解説します。

CSSのfloatとは？

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

.photo {
  float: left;
  margin: 0 16px 16px 0;
}

このように書くと、画像が左に寄り、その右側に文章が回り込みます。

floatの本来の役割は「文字の回り込み」

floatは、新聞や雑誌のように、画像の横に文章を流し込むために使われてきたCSSです。

<img class="article-image" src="sample.jpg" alt="記事の補足画像">
<p>画像の横に本文が回り込みます。floatはこのような文章レイアウトで使われます。</p>

.article-image {
  float: right;
  width: 240px;
  margin: 0 0 16px 16px;
}

floatは「横並びレイアウトを作るための万能ツール」ではなく、「テキストを回り込ませるためのCSS」と理解すると整理しやすいです。

floatが「古い」と言われる理由

floatが古いと言われるのは、CSSとして使えないからではありません。昔は横並びレイアウトを作る手段が少なく、floatを本来の用途とは違う形で使っていたためです。

昔はカラムレイアウトにfloatを使っていた

以前は、2カラムや3カラムのレイアウトを作るときにfloatがよく使われていました。

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

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

この方法でも横並びは作れますが、親要素の高さがなくなる、clearfixが必要になる、スマホ対応で崩れやすいなどの問題があります。

現在はFlexboxやGridの方が自然

現在のCSSでは、横並びやカラムレイアウトにはFlexboxやGridを使うのが一般的です。

.layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
}

また、ナビゲーションやボタンの横並びならFlexboxが向いています。

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

新しくレイアウトを作る場合、floatで横並びを作るのは避け、FlexboxやGridを優先しましょう。

floatを今でも使ってよい場面

floatは古いと言われることがありますが、完全に使ってはいけないわけではありません。本来の用途である「テキストの回り込み」では、今でも使えます。

画像の横に文章を回り込ませる

記事本文内で、画像を右に寄せて文章を左側に回り込ませたい場合は、floatが自然です。

.profile-photo {
  float: left;
  width: 180px;
  margin: 0 20px 16px 0;
}

このような用途なら、floatは今でも分かりやすい選択肢です。

古いテーマや既存サイトの修正

WordPressテーマや古いLPでは、floatでレイアウトが組まれていることがあります。既存サイトを修正するときは、すぐにFlexboxへ全置換するのではなく、影響範囲を確認しながら直す必要があります。実務では、新規制作はFlexboxやGrid、既存の古いCSSの保守ではfloatを読む力が必要になることがあります。

floatで起きやすいトラブル

floatを使うと、独特の表示崩れが起きることがあります。代表例を押さえておきましょう。

親要素の高さがなくなる

floatされた要素は通常の流れから一部外れるため、親要素が中身の高さを認識できないように見えることがあります。

<div class="media-box">
  <img class="media-image" src="sample.jpg" alt="画像">
  <p>本文が入ります。</p>
</div>

.media-box {
  border: 2px solid #1f7a8c;
  background: #eef7f2;
}

.media-image {
  float: left;
  width: 200px;
  margin-right: 16px;
}

この状態では、画像がfloatしている影響で、親要素の.media-boxが中身の高さをうまく持てず、背景色や枠線が期待通りに広がらないことがあります。

.media-box {
  display: flow-root;
  border: 2px solid #1f7a8c;
  background: #eef7f2;
}

.media-image {
  float: left;
  width: 200px;
  margin-right: 16px;
}

display: flow-root;を親要素に指定すると、floatした子要素を親の中に含めるように扱いやすくなります。新しくCSSを書くなら、floatによる親要素の高さ崩れにはdisplay: flow-root;を検討するとシンプルです。

.media-box::after {
  content: "";
  display: block;
  clear: both;
}

.media-box {
  border: 2px solid #1f7a8c;
  background: #eef7f2;
}

.media-image {
  float: left;
  width: 200px;
  margin-right: 16px;
}

::afterを使ったclearfixは、古いCSS設計や既存サイトの保守で今でも見かけることがあります。親要素の最後に見えないブロックを作り、そこでclear: both;を効かせる考え方です。新規制作ではFlexboxやGrid、またはdisplay: flow-root;を優先し、既存サイトの修正ではclearfixの意味を理解して崩さないように直すのがおすすめです。

親要素の背景や枠線が期待通りに広がらない場合は、まずdisplay: flow-root;で直せるかを確認し、古いサイトでは既存のclearfixコードを読み解きながら修正しましょう。

次の要素まで回り込んでしまう

floatを解除しないまま次のセクションに進むと、次の要素まで画像の横に回り込んでしまうことがあります。このときに使うのがclearです。

.next-section {
  clear: both;
}

floatをFlexboxに置き換える方法

横並びレイアウトをfloatで作っている場合は、Flexboxへ置き換えられることが多いです。

古いfloatレイアウト

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

この書き方では、要素数や余白、親要素の高さ管理に注意が必要です。

Flexboxでの書き換え例

.item-list {
  display: flex;
  gap: 24px;
}

.item {
  flex: 1;
}

Flexboxなら、横並び・余白・縦位置の調整がしやすくなります。

横並びを作る目的なら、floatよりFlexboxを使う方が保守しやすいです。

floatをGridに置き換える方法

ページ全体のカラムレイアウトなら、FlexboxよりGridが向いている場合もあります。

.page-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
}

Gridを使うと、「本文は広く、サイドバーは固定幅」のような構成を読みやすく書けます。

floatで作られた古いレイアウトを置き換えるときは、見た目だけでなく、HTML構造やレスポンシブ時の順番も確認しましょう。

floatを使うか迷ったときの判断基準

実務では、次のように判断すると迷いにくくなります。

やりたいこと	おすすめ	理由
画像の横に文章を回り込ませたい	float	本来の用途に近い
ボタンやナビを横並びにしたい	Flexbox	余白や中央揃えを管理しやすい
ページ全体を2カラムにしたい	Grid	列幅や余白を明確に書ける
古いサイトのCSSを読む	floatの理解が必要	既存コードに残っていることがある

公式ドキュメントも確認する

floatやレイアウトの仕様を正確に確認したい場合は、公式情報も参考になります。

• MDN Web Docs float
• MDN Web Docs clear
• MDN Web Docs Flexboxの基本

まとめ：floatは古いが、読めるようにしておくと実務で役立つ

この記事では、CSSのfloatが古いと言われる理由を解説しました。floatは現在でも使えるCSSですが、新しく横並びレイアウトを作る目的ではFlexboxやGridを使うのが基本です。

一方で、画像に文章を回り込ませる用途や、古いサイトの保守ではfloatを理解していると役立ちます。新規制作ではFlexbox・Grid、既存コードの理解ではfloatというように、目的に応じて使い分けましょう。