float

CSSプロパティ「float」の解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

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つの要素を寄せたりすることができ、それに続くテキストなどをそれぞれに回り込ませることができます。