備忘録的プログラミングリファレンス

float プロパティ

 float プロパティは、エレメントを右寄せまたは左寄せするプロパティです。テキストの回り込み表示に利用します。

画像の回り込み表示
img.example{
	float: right;
}

.clear_float {
	clear: both;
}
詳しくはExampleを参照してください

 このプロパティが設定されるとその他の内容が回り込み表示になります。
 写真や画像、図などの周りにテキストを回り込み表示することができます。 そのためにエレメントが浮動すると表現されます。

 浮動する表示を止めるには、clear プロパティを指定します。clear: right | left | both;です。
 もしもどの値が適当かを検討がつかない場合は both が無難です。

構文(Syntax)

CSS

float: none | left | right | inline-start | inline-end ;

DOM ( JavaScript )

値の取得
String = object.style.cssFloat;
値の設定
object.style.cssFloat=" none | left | right | inline-start | inline-end ";

値(Values)

value概要
none初期値です。浮動しません。
left親要素に中で左側に浮動します。その他は回り込むように表示されます。
right親要素に中で右側に浮動します。
inline-start親要素の中で内容が始まる側(多くは右上)に浮動します。
inline-end要素の中で内容が終わる側(多くは左上)に浮動します。
initial初期値に戻します。
inherit親エレメントから継承します。

備考(Remarks)

Default value(初期値)none
Inherited(継承)No
AnimatableNo

Example

 floatの例です。 写真や画像、図などの周りにテキストを回り込み表示にします。写真や画像、図は右や左に寄せることができます。
 文面のレイアウトを調整するために使います。