float

Updated 2013.11.06 / Published 2007.02.02

floatプロパティは要素のボックスを左、または右に寄せて、その反対側に後続の内容を流し込ませるフロート（浮動化）を指定します。フロートは、回り込みとも言い換えられます。フロートできる対象は、内容領域（テキストや画像など、その要素の内容を表示する部分）、パディング（枠内余白）、ボーダー（外枠）、マージン（枠外余白）の4つの矩形領域をボックスと見立てた段落やフォームなどあらゆる要素が含まれます。

ただし、positionプロパティで "absolute"、または "fixed" のいずれかを指定された絶対位置決めの要素を除きます。また、CSS2 の仕様において、適用対象から除外されていた生成内容の要素についても、改訂版の CSS2.1 の仕様では指定が可能となっています。ただし、"display : none ;" を指定された要素や適用対象にはなってもルート部の要素（html要素と body要素）に対する指定は無効です。

値

none
left
right
inherit

初期値

none

適用対象

すべての要素（絶対位置決めの要素を除く）

継承

しない

メディア

visual

floatプロパティの値

floatプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。

none: ボックスをフロートしない（回り込まない）
left: ボックスを左に寄せて配置、その右側に後続の要素が流し込まれ、回りこむ
right: ボックスを右に寄せて配置、その左側に後続の要素が流し込まれ、回り込む

置換インライン要素以外でフロートを指定する場合（置換インライン要素は内在寸法が流用されるため）、必ず widthプロパティで要素の横幅を明示する必要があります。CSS2 仕様では、要素の横幅が明確ではないと、フロートを指定された要素の横幅は常に "0" とみなされます（CSS2.1 仕様では、width : auto ; であれば、横幅は 0 ではなく、"shrink-to-fit" width と呼ばれる、「内容にぴったりと合うように縮んだ」幅になるとあります）。UA 側の実装も横幅が指定されていなくても、適当な領域を勝手に確保するようになっているので、これが shrink-to-fit widthに相当するようです。なお、フロートを解除するには、後続のブロックボックスを形成する要素(display : block ;が指定されている)に対して、clearプロパティを指定するか、回り込みが指定されている要素の親要素にclearfixを用いるようにします。

shrink-to-fit width = 内容にぴったりと合うように縮んだ幅

以下は、shrink-to-fit width についての仕様書からの翻訳です。

shrink-to-fit width の計算は、自動レイアウトアルゴリズム（table-layout : auto ;）を使用しているテーブルのセル幅の計算と類似しています。概略：まず、明示的に行区切りが生じるところ以外では行を区切らずに内容を整形化する事によって、好ましい幅（preferred width）を計算します。次に、可能な限りの行区切りを試みるなどして、好ましい最小限の幅（minimum width）を計算します。CSS2.1 では、正確なアルゴリズムを定めません。第三に、利用可能な幅（available width）を包含ブロックの横幅から margin-left, border-left-width, padding-left, padding-right, border-right-width, margin-right の各値と関連するスクロールバーの横幅を差し引くことで見つけます。

つまり、shrink-to-fit width は次のようになります：最小（最大（好ましい最小限の幅, 利用可能な幅）, 好ましい幅）

floatプロパティの実装状況

IE: ◯：IE6ではフロート方向のマージンが倍の値で算出されるようになる不具合があります
Firefox: ◯
Opera: ◯
Chrome: ◯
Safari: ◯
iOS: ◯
Android: ◯

サンプル

body       { text-align : center ; }
#container { width : 96% ; margin : 0 auto ; text-align : left ; }
#wrapper   { width : 75% ; float : left ; }
#boxB      { width : 66.7% ; float : right ; }
#boxC      { width : 32% ; float : left ; }
#boxD      { width : 24% ; float : right ; }
#boxE      { width : 100% ; clear : both ;}
......
<div id="container">
<div id="boxA">A（ヘッダ）</div>
<div id="wrapper">
<div id="boxB">B（メインカラム）</div>
<div id="boxC">C（サイドバー1）</div>
</div>
<div id="boxD">D（サイドバー2）</div>
<div id="boxE">E（フッタ）</div>
</div>

floatプロパティは、div要素などのブロックレベル要素をフロートさせる事で、擬似的に段組（マルチカラム）を表現する場合にも使われています（CSS3にはマルチカラム用の専用のプロパティが用意されています）。