WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > float
float  配置 

左または右に寄せて配置する。

このエントリーをはてなブックマークに追加

positionプロパティで static以外の値が指定されている要素には適用されません。

指定された要素を左または右に寄せて配置します。 後に続く文章などの内容は回り込みます。

パラメーター

left
　指定した要素を左寄せに。後に続く内容はその右側に回り込みます。
right
　指定した要素を右寄せに。後に続く内容はその左側に回り込みます。
none
　特に配置を指定しない(初期値)。

幅40%の通常のDIVを4つ

<div style="width:40%;background-color:blue;">1つめのブロック</div>
<div style="width:40%;background-color:red;">2つめのブロック</div>
1つめのブロック
2つめのブロック
3つめのブロック
4つめのブロック

幅40%で float:leftを指定したDIVを4つ

<div style="width:40%;background-color:blue;float:left;">1つめのブロック</div>
<div style="width:40%;background-color:red;float:left;">2つめのブロック</div>
1つめのブロック
2つめのブロック
3つめのブロック
4つめのブロック


通常の画像と文章

<img src="/img/na.gif" />ひよこの画像です。
ひよこの画像です。

画像にfloat:lefttを指定した場合

<img src="/img/na.gif" style="float:left;" />ひよこの画像です。
ひよこの画像です。


画像にfloat:rightを指定した場合

<img src="/img/na.gif" style="float:right;" />ひよこの画像です。
ひよこの画像です。