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>

表示例

[写真]

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

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

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

[写真]

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

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

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