CSS の float プロパティは、要素を包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこめるように定義します。要素はウェブページの通常のフローから外れますが、 (絶対位置指定 とは対照的に) フローの一部であり続けます。

浮動要素 (floating element) とは、float の計算値が none 以外の要素です。

float は暗黙的にブロックレイアウトの使用を意味しており、 display の計算値を変えるケースがあります。

指定値 計算値
inline block
inline-block block
inline-table table
table-row block
table-row-group block
table-column block
table-column-group block
table-cell block
table-caption block
table-header-group block
table-footer-group block
flex flex。ただ、float はこうした要素に効果を持ちません
inline-flex inline-flex。ただ、float はこうした要素に効果を持ちません
その他 変更されません
メモ: JavaScript で element.style オブジェクトのメンバーとしてこのプロパティを参照するときは、Firefox 34 およびこれ以前では綴りが cssFloat になります。 Internet Explorer のバージョン 8 およびこれ以前では、 styleFloat と記述することにも注意してください。これは、ダッシュ区切りの CSS 名を DOM メンバーとしてはキャメルケースで綴る、というルールの例外になります (これは "float" が JavaScript の予約語であるためで、 "class" を "className" とする必要があったり、 <label> の "for" を "htmlFor" とする必要があったりするのと同じです)。

構文

float プロパティは、以下の値からひとつのキーワードを選択して指定します。

left
要素は、必ずその包含ブロックの左側に浮動します。
right
要素は、必ずその包含ブロックの右側に浮動します。
none
要素は決して浮動しません。
inline-start
要素は、必ずその包含ブロックの始端側に浮動します。 ltr 表記では左側、rtl 表記では右側になります。
inline-end
要素は、必ずその包含ブロックの終端側に浮動します。 ltr 表記では右側、rtl 表記では左側になります。

形式文法

left | right | none | inline-start | inline-end

浮動要素の位置をどのように決めるか

上述のとおり、要素は浮動すると、文書の通常のフローから外されます (ただし、フローの一部であり続けます)。浮動要素は、包含ブロックか他の浮動要素の辺に触れるまで、左側または右側に移動させられます。

この例では、3 つの赤い正方形があります。このうち 2 つは左側に浮動しており、1 つは右側に浮動しています。2 つめの "左の" 赤い正方形は、1 つめの正方形の右に置かれていることに注意してください。正方形を追加していくと、包含ボックスが埋まるまではその右側に詰め込まれていきますが、その後は次の行に回り込みます。

HTML

<section>
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Morbi tristique sapien ac erat tincidunt, sit amet dignissim
     lectus vulputate. Donec id iaculis velit. Aliquam vel
     malesuada erat. Praesent non magna ac massa aliquet tincidunt
     vel in massa. Phasellus feugiat est vel leo finibus congue.</p>
</section>

CSS

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 50px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.right {
  float: right;
  background: cyan;
}

結果

浮動の解除

アイテムを浮動要素の下へ強制的に移動したいことがあるでしょう。例えば、段落は浮動要素に隣接させたいが、見出しは強制的に単独の行にしたい場合があるでしょう。この例については clear をご覧ください。

仕様書

仕様書 状況 備考
CSS Logical Properties and Values Level 1
float and clear の定義
編集者草案 inline-start および inline-end を追加
CSS Basic Box Model
float の定義
草案 明確には定義されていない、多くの新たな値を追加。新機能に関係しない動作の違いは、故意に行ったものではないと考えられます。報告してください。
CSS Level 2 (Revision 1)
float の定義
勧告 変更なし
CSS Level 1
float の定義
勧告 初期定義

初期値none
適用対象すべての要素。ただし displaynone なら効果を持ちません。
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 6Safari iOS 完全対応 1Samsung Internet Android 完全対応 あり
Flow-relative values inline-start and inline-end
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 55IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 完全対応 55Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, SphinxKnight, yyss, fscholz, teoli, ethertank, sosleepy
最終更新者: mfuji09,