float

概要

CSS の float プロパティは、要素を通常の流し込み処理から外して、その包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこむように定義します。

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

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

構文

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

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

値

left

要素が、その包含ブロックの左側に浮動しなければならないことを示すキーワードです。

right

要素が、その包含ブロックの右側に浮動しなければならないことを示すキーワードです。

none

要素が浮動してはいけないことを示すキーワードです。

inline-start

要素が、その包含ブロックの始端側に浮動しなければならないことを示すキーワードです。ltr 表記では左側、rtl 表記では右側になります。

inline-end

要素が、その包含ブロックの終端側に浮動しなければならないことを示すキーワードです。ltr 表記では右側、rtl 表記では左側になります。

形式文法

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

例

実際の表示を確認

<style type="text/css">
  div { border: solid red;  max-width: 70ex; }
  h4  { float: left;  margin: 0; }
</style>
 
<div>
  <h4>HELLO!</h4>
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
</div>

フロートがどうやって位置を決めるか

上述のとおり、要素は浮動すると、文書の通常の流し込み処理から外されます。浮動要素は、包含ブロックか他の浮動要素の辺に触れるまで、左側または右側に移動させられます。

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

フロートの解除

上の例では、テキストのブロックが、その中にある浮動要素よりも縦方向に長くなっています。しかし、もし文字数がすべての浮動要素の下に回り込めないほど少なければ、望まない結果になるかもしれません。上の段落に仮に "Lorem ipsum dolor sit amet," だけが書いてあり、その後に見出し "Floats Example" と同スタイルの別の見出しが続いていたら、その2番めの見出しは赤箱と赤箱の間に現れたでしょう。わたしたちは十中八九、見出しはずっと左側一列に並ぶものだと思っています。そのためにはフロートを解除しなければなりません。

この例で言えば、一番簡単なフロートの解除方法は、確実に左側に寄せたい新しい見出しに clear プロパティを与えることです:

h2.secondHeading { clear: both; }

ところがこの方法は、横隣に続けて見出しを並べたいのと同じブロック整形文脈に、他に要素がないときにだけ機能します。H2 の兄弟要素に左と右に浮動するサイドバーがあれば、clear を使うと H2 がどちらのサイドバーよりも下に現れますが、これはおそらく望んだ結果ではないでしょう。

フロートより下にある要素でフロートを解除する方法が選択肢にないなら、もう一つの方法は、フロートを包含するブロック整形文脈を限定することです。上の例に戻ると、3つの赤い箱はすべて1つの P 要素の中にあるようです。その P 要素の overflow プロパティを hidden または auto に設定すると、赤い箱が入るように広がって、底が抜けないようになります:

p.withRedBoxes { overflow: hidden; height: auto; }

仕様書

ブラウザ実装状況

[1] Nightly および Aurora (Dev edition) では、デフォルトで有効です。Release または Beta 版で有効にするには、layout.css.float-logical-values.enabled を true に切り替えなければなりません。

関連情報

• ブロック整形文脈