We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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

/* キーワード値 */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* グローバル値 */
float: inherit;
float: initial;
float: unset;

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

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 の定義
勧告 初期定義

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1121471
Flow-relative values inline-start and inline-end なし なし55 なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応1 あり あり461 あり
Flow-relative values inline-start and inline-end なし なし なし55 なし なし なし

関連情報

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

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