float
ボックスを左右に寄せ、テキスト等を回り込ませるプロパティ。
floatを指定したボックスや画像など（要素）は値の方向（右／左）に寄せられ、それに続くテキストなどをfloatを指定した要素の反対側に回り込ませることができる。
floatによる回り込みは、clearを指定することで解除することができる。
値
| left / right | 寄せたい方向を指定する。 |
|---|---|
| none | 初期値。floatをさせない場合はこれを指定。 |
使用例 - サンプル(A) / サンプル(B) / サンプル(C)
サンプル(A)
[CSSの記述]
.sampleA {float:left;}
[HTMLの記述]
<img alt="" src="hogehoge.gif" class="sampleA" /> <p>テキストテキストテキストテキストテキスト.....</p>
[ブラウザ上の表示]
floatを指定し左側に寄せたimgタグ（画像）の反対側に、それに続くテキストが回りこみます。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
サンプル(B)
[CSSの記述]
.sampleB {
width:100px;
border:solid 1px #cc0000;
float:right;
}
[HTMLの記述]
<p class="sampleB">テキストテキストテキスト</p> <p>テキストテキストテキストテキストテキスト.....</p>
[ブラウザ上の表示]
テキストテキストテキスト
画像以外にも、pタグやdivタグにfloatを指定することで、そのボックスに囲まれたテキストの外側に、文章を回りこませることもできます。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
サンプル(C)
[CSSの記述]
.sampleC1 {float:left;}
.sampleC2 {float:right;}
[HTMLの記述]
<img alt="" src="hogehoge.gif" class="sampleC1" /> <img alt="" src="hogehoge.gif" class="sampleC2" /> <p>テキストテキストテキストテキストテキスト.....</p>
[ブラウザ上の表示]
floatが指定された要素を2つ続けて記述することで、左右に分けて寄せたり、一方向に2つの要素を寄せたりすることができ、それに続くテキストなどをそれぞれに回り込ませることができます。
- 前の記事：padding-right
- 次の記事：clear