HTMLやCSSを学び始めたばかりの人にとって、「float」というプロパティはどこか古くさく、難しそうに感じられるかもしれません。
でも実は、floatは今でも“画像の回り込み”などで役立つ現役のレイアウト手法です。
特に、昔のCSS設計や既存サイトの改修時など、floatの知識は今でも重要。
また、画像や文章を雑誌のように回り込ませる表現は、今のflexやgridではうまく代替できない場面もあります。
この記事では、初心者にも分かりやすく float の意味や使い方、使われる場面、注意点までをまるっと解説します！
floatとは？
✅ floatの基本的な意味
CSSのfloatプロパティは、要素を左右に寄せて他の要素を回り込ませるためのプロパティです。
たとえば画像をテキストの右側に寄せて、その周りを文章が囲むようなレイアウトが可能になります。
画像を使った記事やブログ、ECサイトの商品説明などで、よく使われてきた手法です。
See the Pen Untitled by kokusyo (@kokusyo) on CodePen.
<div>
<img src="sample.jpg" alt="サンプル画像">
このテキストは画像の周りに回り込んで表示されます。このテキストは画像の周りに回り込んで表示されます。～省略
</div>img {
float: left;
}このようにすると、画像が左側に寄り、右にテキストが回り込みます。
今度は画像にfloat: rightを指定してみます。
前のサンプルは画像に float: left を使って、テキストの左側に画像を配置しました。今回はその逆、画像を右側に寄せてみましょう。float: right を使うことで、画像がテキストの右側に回り込み、すっきりとしたレイアウトに仕上がります。
右寄せにすることで、読み進めながら自然と画像に目が行くような構成にもなります。実際に使ってみると、左右のバランスを取るのに便利なプロパティです。
See the Pen Untitled by kokusyo (@kokusyo) on CodePen.
img {
float: right;
}floatのよくある誤解・つまずき
❌ なぜ要素の高さが消えるの？
floatを使うと、親要素が子要素の高さを認識しなくなってしまうケースがあります。
See the Pen Untitled by kokusyo (@kokusyo) on CodePen.
<div class="parent">
<img src="https://web-create-kokusyo.com/wp-content/uploads/2025/01/Lesson-①.png" width="300">
<p>これは画像とテキストのfloat例です。画像が左に浮かび、テキストはその横に回り込みますが...</p>
</div>この場合、.parentは画像の高さを持たず、親要素からはみ出しています。
✅ 対策：clearfixやoverflow: hiddenで回避可能です。
floatの解除方法まとめ（clearfix）
.parent::after {
content: "";
display: block;
clear: both;
}または、よりシンプルに：
.parent {
overflow: hidden;
}See the Pen Untitled by kokusyo (@kokusyo) on CodePen.
どちらも、親要素が子要素の高さを正しく認識するために使います。
floatはなぜ古いと言われるの？
昔は、Webサイトの2カラム・3カラムレイアウトを作るために、floatが主流でした。しかし今では flexbox や grid のような便利なプロパティが登場したため、floatは徐々に使われなくなっています。
✅ とはいえ、floatでしかできないこともある！
特に「テキストを画像の周囲に自然に回り込ませる」という表現は、現在でもfloatが最も適している方法です。 flexやgridでは回り込みを自然に実現することは難しく、floatの方が直感的で柔軟なケースもあるのです。
floatの現代での活躍ポイントは？
✅ 画像の回り込み
やはり最も有効なのは、画像や図を文章に回り込ませたいときです。新聞や雑誌風のレイアウトにぴったりです。
これにより、文章と画像が自然に共存し、見た目も洗練された印象になります。
❌ カラムレイアウトや中央寄せには不向き
それ以外のレイアウト（カラム設計、中央寄せなど）には、flexboxやgridを使う方が簡単かつ堅牢です。
floatの現代的な活用アイデア
- 新聞風レイアウトの再現：テキストと画像を自然に混在させたい場面。
- プロフィール欄：画像と名前・説明文を回り込ませたいとき。
- コラム記事の装飾：記事冒頭の装飾画像にテキストを回す演出。
【コラム】floatの歴史をざっくり解説
- 登場時期：HTML4〜CSS2の時代に活躍。
- 主な用途：2カラムレイアウト、画像の回り込み、バナーなど。
- 欠点：高さが消える、並びが崩れる、解除が面倒。
- 現在：画像の回り込みなどに用途を限定して活躍中。
まとめ
floatは要素を左右に寄せ、他の要素を自然に回り込ませるためのCSSプロパティ。- 現代ではflexやgridが主流だが、画像の回り込み用途ではfloatが今でもベスト。
- カラムレイアウトには向かないが、新聞的な演出ではいまだ有用。
初学者のスタートダッシュに最適