float

floatは、ボックスの回り込みを指定するスタイルです。

解説

要素を左側または右側に寄せて表示させたい場合に使用します。
floatを指定した要素に続く要素は、floatで指定した側の反対側に回り込んで表示されます。
（float:leftなら後に続く要素は右側に回り込んで表示されます。）

clearスタイルで寄せを解除するまで回り込んで表示されます。

構文

構文は以下になります。

値

floatには以下の値が指定できます。

太字の値は初期値です。

サンプル

画像を右側に回り込ませる

.sample01 {
  float:right;
}

<div>
  <img src="neko.png" alt="ねこ" class="sample01">
  <p>うちの猫です</p>
</div>

うちの猫です

画像を左側に回り込ませる

.sample02 {
  float:left;
}

<div>
  <img src="neko.png" alt="ねこ" class="sample02">
  うちの猫です
</div>

うちの猫です

画像を回り込ませない

.sample03 {
  float:none;
}

<div>
  <img src="neko.png" alt="ねこ" class="sample03">
  うちの猫です
</div>

うちの猫です

関連項目

• clear：ボックスの回り込みを解除する
• float：ボックスの回り込みを指定する

Tweet