Float プロパティ

最終更新：2026-09-13

float Float プロパティ

float プロパティは、要素を通常フローから外し、包含ブロックや別の浮动要素の端に触れるまで左または右へ浮动させます。もともとは画像の周りをテキストで囲む（回り込み）ために設計されましたが、その後は段組みレイアウトに広く使われました。現在では Flexbox や Grid が普及したことで、本来の目的に回帰しています。

カテゴリ
初期値	none
継承	いいえ
適用対象	すべての要素
アニメーションタイプ	discrete
CSS バージョン	CSS1
状態	標準

📝 構文

float: none | left | right | inline-start | inline-end;

⚙️ 値

値	タイプ	説明
`left \| right \| none`	キーワード	要素が浮动する方向。

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
float	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

注意： 浮动要素はドキュメントフローを離れるため、親がその高さを認識できずに高さが崩れる（高さが 0 になる）ことがあります。浮动を解除する一般的な方法は、親に overflow:hidden を指定するか、::after 疑似要素を使うことです。

ヒント： 段組みレイアウトには Flexbox や Grid を使うのがおすすめです。float は画像の周りをテキストが回り込むような、本来のシナリオにより適しています。

❓ よくある質問

Qfloat を解除するには？

Aよく使われる方法は 3 つあります。1 つ目は親に overflow:hidden または auto を指定して、浮动する子を BFC で囲む方法。2 つ目は推奨される疑似要素の方法です：.clearfix::after{content:'';display:block;clear:both}。3 つ目は親に display:flow-root を指定する方法です。いずれも親が浮动する子を再び内包し、崩れた高さを回復させます。新しいコードでは flow-root が最も洗練されていますが、clearfix クラスは既存のコードベースの多くに残っています。

Qfloat と display:inline-block の違いは？

Afloat は要素をフローから外して左右へ押し出し、後続のコンテンツがその周りを囲む（回り込む）ようにしますが、親の高さが崩れることがあります。inline-block は要素をフロー内に残し、横に並べて回り込みは起きません。またアイテム間にデフォルトの空白ができますが、font-size:0 で除去できます。一言で言えば、float はテキストの回り込みや初期の段組みに、inline-block は横並びのリストやナビゲーションバーに向いています。

Qfloat で親の高さが崩れるのはなぜですか？

A浮动要素は通常フローを離れるため、親はその高さを認識できず「中身が何もない」と判断して、高さが 0（あるいは浮动していないコンテンツの高さだけ）に崩れます。解決策は、親にもう一度浮动を内包させることです。overflow:hidden または auto で BFC を作る、clearfix 疑似要素で解除する、あるいは display:flow-root を指定する、いずれも同じ効果です。Flex や grid のコンテナはこのように崩れることはまったくありません。

Qモダンなレイアウトで float はまだ必要ですか？

Aレイアウト目的であれば、基本的には不要です。Flexbox と Grid が段組みや横並びを完全に取代えており、float の解除といった負担なくより柔軟に制御できます。float は現在、新聞の組版のように画像の周りをテキストが回り込むという本来の目的で使われます。新しいプロジェクトで単に横並びにしたいだけなら flex を使い、テキストが図形の周りを流れるような稀な場合だけ float を取っておけば十分です。