floatで画像を左に寄せ、その横に文章を流す。Web制作では昔から定番のレイアウトです。ところが文章が画像より長くなると、文字が画像の下にぐるりと回り込んでしまう。「ここで折り返したくないのに」と頭を抱えた経験、ありませんか。
デザインによっては、画像の右側だけに文章を収めて、はみ出た分は下に回り込ませず端をそろえたい場面があります。私も長いWeb制作歴のなかで何度もぶつかってきた、地味だけど避けて通れない悩みです。
この記事では、floatした画像にテキストを回り込ませない方法を、定番のoverflow:hiddenから現代の推奨であるdisplay:flow-root、さらにそもそもfloatを使わないflex/gridまで、全部で5つ紹介します。
単に「このコードを書けば直る」で終わらせず、なぜそれで止まるのかという仕組み（回り込みとBFC）まで踏み込みます。仕組みがわかると、現場で「どれを使うか」を自分で選べるようになります。コード例はそのままコピペで試せる形にしてあります。
ちなみに、この記事の元になった13年前の私の原稿はoverflow:hiddenだけを推す内容でした。当時はそれで十分でしたが、今読むと選択肢が古い。display:flow-rootもFlexboxも、まだ気軽に使えなかった時代の記事だったからです。だからこそ2026年の今に合わせて全面的に書き直しています。
結論を先に言えば、止め方は大きく「回り込ませたい側でBFCを作る」「clearで押し下げる」「そもそもfloatを使わない」の3系統。この記事ではその3系統を5つの具体策に分けて、どれをいつ選ぶかまで踏み込みます。コピペで動くコードと、なぜ効くのかの理屈、その両方を持ち帰ってもらえる構成です。
そもそもなぜテキストが回り込むのか
解決策の前に、回り込みが起きる理由を押さえておくと話が早いです。
要素にfloat:leftを指定すると、その要素は通常の文書の流れ（フロー）から少し外れ、左に寄ります。すると後ろに続くテキストは、その空いたスペースを埋めるように、floatした画像の横から下へと自然に回り込んでいきます。これはfloatの仕様どおりの正しい挙動で、バグではありません。
つまり「回り込ませない」とは、floatの巻き込みを断ち切ること。CSSにはそのための方法が複数用意されていて、効き方の仕組みが微妙に違います。
まず、回り込みが起きる基本のコードはこうです。
<div class="box">
<img src="sample.png" alt="サンプル画像">
<p>ここに回り込ませたくない長いテキストが入ります。</p>
</div>.box img {
float: left;
}このままだと、<p>のテキストが画像より長くなった瞬間、文字が画像の下に回り込みます。ここを起点に、5つの止め方を見ていきます。
出典：float – CSS: カスケーディングスタイルシート | MDN
方法1：回り込ませたい要素に overflow:hidden（定番ワザ）
一番手軽で、長く定番だったのがこれです。回り込ませたくない側の要素（ここでは<p>）にoverflow:hiddenを指定します。
.box p {
overflow: hidden;
}たった1行で、<p>のテキストが画像の下に回り込まなくなり、画像の右側にきれいに収まります。
なぜこれで止まるのか。overflowにvisible以外の値を指定すると、その要素は「ブロック整形コンテキスト（BFC）」という独立したレイアウト領域を作るからです。BFCを作った要素は、外側にあるfloatの領域を避けて配置されるため、画像に食い込まず横にきちんと並びます。仕組みの詳細は次の方法とあわせて後述します。
ただしoverflow:hiddenには弱点があります。名前のとおり、要素からはみ出した中身を「隠す（hidden）」のが本来の役割なので、ドロップシャドウやツールチップ、はみ出して見せたい装飾までバッサリ切り取ってしまうことがあります。回り込み対策のつもりが、思わぬ表示崩れを呼ぶわけです。
正直に言うと、私も昔はこの副作用に気づかず、影が切れて「なんで？」と悩んだことが何度もあります。手軽さは魅力ですが、副作用を理解して使うべきテクニックです。
方法2：clearプロパティで「ここから下」と区切る
回り込み自体は許しつつ、特定の要素から下はfloatの影響を受けたくない。そんなときはclearプロパティの出番です。
.after-float {
clear: both;
}clearは、指定した要素を直前のfloat要素より下まで強制的に押し下げるプロパティです。値はleft（左floatを回避）、right（右floatを回避）、both（両方を回避）の3つが基本。迷ったらbothを選んでおけば、左右どちらのfloatでも確実に下げられます。
これは「画像の横に並べる」のではなく「画像のブロックを終わらせて、続きは下の行から始める」用途に向いています。たとえば見出しや次のセクションをfloatの影響から切り離したいときに使います。回り込みを止めたい対象が画像の真横ではなく、その先の要素ならclearがしっくりきます。
なおclearはブラウザ全般で2015年7月以降ずっと安定して使える、枯れた信頼できるプロパティです。互換性を心配する必要はまずありません。
方法3：clearfix（::after）で親要素にfloatを閉じ込める
floatを多用していた時代に、まさに王道だったのがclearfixです。floatした子要素ばかりの親要素は高さが潰れてしまう（背景や枠線が効かなくなる）ので、それを防ぐ定番テクニックでした。
.box::after {
content: "";
display: table;
clear: both;
}やっていることはシンプルで、親要素の末尾に空の擬似要素（::after）を作り、そこにclear:bothを効かせて、内側のfloatをまとめて閉じています。これで親が子のfloatをきちんと包み込み、高さが保たれ、後続の要素への回り込みも止まります。
長年お世話になった手法ですが、3行も書く必要があり、空の擬似要素を作る発想がやや回りくどいのも事実。今から新しく書くなら、次に紹介する1行で済む方法をおすすめします。とはいえ既存サイトの保守ではまだ大量に見かけるので、読めて直せることは今でも価値があります。
方法4：display:flow-root（2026年の本命）
そして、現在もっともおすすめなのがdisplay:flow-rootです。clearfixがやりたかったことを、たった1行できれいに実現します。
.box {
display: flow-root;
}これを親要素に書くだけで、内側のfloatがすべて閉じ込められ、高さも保たれ、回り込みも止まります。flow-rootは「副作用なしでBFCを作るためだけに用意された値」で、これこそが本来の正解です。
方法1のoverflow:hiddenも裏では同じBFCを作っていますが、あちらは「はみ出しを隠す」という別の役割のついでにBFCができていただけ。だからスクロールバーが出たり影が切れたりという副作用がありました。flow-rootはそうした余計な効果が一切ないので、コードを読んだ人にも「ここはBFCを作りたいんだな」と意図がはっきり伝わります。
ここでBFC（ブロック整形コンテキスト）を一度きちんと整理しておきます。BFCを作った要素は、次の3つの性質を持ちます。
1つめは内側のfloatを内部に閉じ込めること（親の高さが潰れない）。2つめは外側のfloatを避けて配置されること（画像に食い込まず横に並ぶ）。3つめはマージンの相殺を抑える（隣接マージンが意図せず重ならない）ことです。今回の回り込み対策は、この1つめと2つめの性質を利用しているわけです。
display:flow-rootもモダンブラウザで広くサポート済みで、よほど古い環境を相手にしない限り安心して使えます。私自身、新規案件ではclearfixをやめてこれに完全移行しました。1行で意図が伝わるコードは、半年後の自分にも優しいです。
出典：display – CSS | MDN ／ ブロック整形コンテキスト – CSS | MDN
方法5：そもそもfloatをやめてflex/gridで組む
ここまで「floatの回り込みを止める」話をしてきましたが、2026年の本音を言えば、画像とテキストを横並びにしたいだけなら、最初からfloatを使わずFlexboxやCSS Gridで組むのが一番すっきりします。
Flexboxなら、回り込みという概念がそもそも発生しません。親をflexコンテナにするだけで、画像とテキストが横並びになり、テキストがどれだけ長くなっても画像の下に回り込むことはありません。
.box {
display: flex;
gap: 16px;
align-items: flex-start;
}これだけで、画像とテキストが横にきれいに並び、テキストは画像の右側の領域内で折り返します。gapで間隔も直感的に調整できます。floatのように「回り込みを止める追加のおまじない」を一切書かなくていいのが気持ちいいところです。
3カラム以上の複雑なレイアウトや、行と列をきっちり整列させたいときはCSS Gridがさらに強力です。floatは元々「文章のなかに画像を回り込ませる」ための仕組みなので、ページ全体のレイアウト用途には今や向いていません。レイアウトはflex/grid、文章中の画像回り込みだけfloat、という使い分けが現代の基本です。
とはいえ、雑誌のように本文の途中に画像を置いて文章を回り込ませたい、という表現はflex/gridでは作れません。その「回り込みそのものが欲しい」場面でだけfloatを使い、止めたいときは方法4のflow-rootを添える。この組み合わせが、私のいまの定番です。
関連記事：CSSのfloatとは？回り込み・clearfix・Flexboxの使い分けを解説
まとめ：どれを使えばいいのか
floatした画像にテキストを回り込ませない方法を5つ見てきました。最後に、現場での選び方を整理します。
これから新しく書くなら、横並びレイアウトそのものはFlexbox（方法5）で組むのが第一候補です。回り込みという悩み自体が消えるので、もっとも素直です。
本文中に画像を回り込ませる表現が必要で、なおかつ親要素のfloatを閉じたいときは、迷わずdisplay:flow-root（方法4）の1行。これがclearfixの正統な後継で、2026年の本命です。
定番のoverflow:hidden（方法1）も1行で効きますが、影やはみ出し装飾を切ってしまう副作用があるので、表示崩れが起きないか確認したうえで。特定の要素から下だけfloatを切りたいならclear（方法2）、古いサイトの保守でclearfix（方法3）を見かけたら読めれば十分です。
どの方法も裏側にあるのは「BFCを作る」か「clearで押し下げる」かのどちらかです。仕組みさえつかめば、コードを丸暗記しなくても、目の前の状況に合った一手を自分で選べるようになります。13年前の私のようにpaddingでごまかして恥をかかないよう、ぜひflow-rootとFlexboxを今日から手札に加えてください。
