float
CSSの書き方
float:値 ;
| CSSの詳細情報 | |||||
|---|---|---|---|---|---|
| プロパティ名 | float | 読み方 | フロート | ||
| 初期値 | none | 意味 | 画像や文章の回り込み設定 | ||
| 値 | none（回り込みしない）/left/right | ||||
| 対象 | 位置を定める要素 | ||||
| CSSレベル | CSSレベル1 | 対応ブラウザ | Windows | MAC | |
| 継承 | しない | IE 5.0以上/FF1.0/NS7.1/OP8.0 | SF/IE5.0 | ||
解説
「float」プロパティは、文章や画像を回り込みさせる機能をもつスタイルシートです。
例えば、「float:left;」とすると、この「float」プロパティを指定した内容や要素は左寄せされ、後に続く内容が、その右側に回り込みます。
逆に、「float:right;」とすれば、回り込みは右側に設定されます。
回り込みの解除
この回り込みは「clear」プロパティによってその回り込みが解除されるまで、もしくは後に続くブロックレベル要素の「width」プロパティの値が指定されており、なおかつその要素が内容に収まりきらないときに回り込みが解除されます。
連続指定
「float」プロパティは、連続して使用することができます。
従って、「float」プロパティを指定した連続するブロック要素は、連続して回り込みます。
例えば、「float:left;」を連続すると、最初の要素の右側に次の内容が回り込みます。
ブロックレベル要素の扱い
「float」プロパティをブロックレベル要素に指定する場合は、必ずそのブロックレベル要素の「width」プロパティの値を定めなければなりません。
また、2つ以上のブロックレベル要素を「float」プロパティによって並べて表示する場合、すべてのブロックレベル要素において「float」プロパティを指定しなければなりません。
そうしないと、主にGecko系エンジン（FireFoxやNetscape）で正しく表示されません。
CSS/HTMLサンプル
p { height:400px; width:250px;}
p.sm1 { float:left; background-color:#ffdff9; }
p.sm2 { float:left; background-color:#eeeeee; margin-left:10px;}
2つの段落要素をfloatプロパティによって並べる サンプル
