float: ***;

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
プロパティ

float は、フロート（浮動化）を指定するプロパティです。

このプロパティをimg要素に対して設定すると、画像をフロートさせることができます。（画像を左か右に寄せて、逆側にテキストなどを回り込ませることができます）


img.example {
float: left;
}
プロパティ名 値 説明
float none フロートさせない （初期値）
left 画像を左に配置して、後続の内容を右側に回り込ませる
right 画像を右に配置して、後続の内容を左側に回り込ませる

フロートを指定する場合は、回り込みを解除するもご覧ください。

IEの不具合について

IE 6以下では、次の不具合が発生する場合があります。（IE 7からは、この不具合は解消されているようです）

  • 背景色（または背景画像）が設定された要素内でフロートを指定すると、回り込んだテキストの一部が消えたり、背景の一部が反映されなかったり、といった不具合が発生する場合があります。（親要素に対して幅（width）を指定しておくと、この不具合を回避することができます）
  • フロートを指定した方向にマージンを設定すると、そのマージンの大きさが2倍になってしまいます。（例えば float: left を指定した画像に margin-left: 30px を指定すると、そのマージンが 60px になってしまう）

使用例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

div.example {
width: 100%;
margin-bottom: 3em;
}

img.example1 { float: left; }
img.example2 { float: right; }

.clearLeft { clear: left; }
.clearRight { clear: right; }

</style>

</head>
<body>

<div class="example">

<p><img src="rainbow.jpg" alt="［写真］" class="example1"></p>

<p>画像の右側にテキストを回り込ませた例です。</p>

<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>

<p class="clearLeft">回り込みを解除しました。</p>

</div>


<div class="example">

<p><img src="rainbow.jpg" alt="［写真］" class="example2"></p>

<p>画像の左側にテキストを回り込ませた例です。</p>

<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>

<p class="clearRight">回り込みを解除しました。</p>

</div>

</body>
</html>
表示例

［写真］

画像の右側にテキストを回り込ませた例です。

サンプルテキスト。サンプルテキスト。サンプルテキスト。

回り込みを解除しました。

［写真］

画像の左側にテキストを回り込ませた例です。

サンプルテキスト。サンプルテキスト。サンプルテキスト。

回り込みを解除しました。