CSS3

プロパティ

float

→●、mdn

浮動体の位置決め。

このプロパティは、ボックスが浮動すべきか、するならば 左方、右方 のいずれへ浮動するかを指定する。どの要素にも設定し得るが、絶対的に位置されたボックスを生成する要素には適用されず、その算出値も改められることになる ─ § 9.7を見よ。

left

要素は、左へ浮動するボックス ─ 左方へ浮動されるブロック ボックス ─ を生成する。周りの内容は、ボックスの右脇に、かつ ボックスの上端からフローする（clear プロパティの対象になる）。

<DIV style="width:200px; border:1px solid black; font-size:20px; line-height:1;">
 <SPAN style="float:left; border:1px solid red">浮動体<BR>です</SPAN>
 あああああああああああああああああああああああああああ
</DIV>

<DIV style="width:200px; border:1px solid black; font-size:20px; line-height:1;">
 <DIV style="float:left; width:70px; height:70px; border:1px solid red">浮動体</DIV>
 あああああああああああああああああああああああああああ
</DIV>

<DIV style="width:200px; border:1px solid black; font-size:20px; line-height:1;">
 <IMG src="Com/Picture.jpg" style="float:left; width:70px; height:40px; border:1px solid red">
 あああああああああああああああああああああああああああ
</DIV>

right

要素は、右へ浮動するボックス ─ 右方へ浮動されるブロックボックス ─ を生成する。周りの内容は、ボックスの左脇に、かつ ボックスの上端からフローする（clear プロパティの対象になる）。

<DIV style="width:200px; border:1px solid black; font-size:20px; line-height:1;">
 <SPAN style="float:right; border:1px solid red">浮動体<BR>です</SPAN>
 ああああああああああああああああああああああああああああああ
</DIV>

none

ボックスは浮動されない。

<DIV style="width:200px; border:1px solid black; font-size:20px; line-height:1;">
 <SPAN style="float:none; border:1px solid red">浮動体<BR>です</SPAN>
 ああああああああああああああああああああああああああああああ
</DIV>

<DIV style="width:200px; border:1px solid black; font-size:20px; line-height:1;">
 <IMG src="Com/Picture.jpg" style="float:none; height:50px; border:1px solid red">
 ああああああああああああああああああああああああああああああ
</DIV>

テスト