float: ***;
| ブラウザ |
|
|---|---|
| プロパティ |
float は、フロート（浮動化）を指定するプロパティです。
このプロパティをiframe要素に対して設定すると、インラインフレームをフロートさせることができます。（インラインフレームを左か右に寄せて、逆側にテキストなどを回り込ませることができます）
iframe.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;
}
iframe {
width: 50%;
height: 150px;
}
iframe.example1 { float: left; }
iframe.example2 { float: right; }
.clearLeft { clear: left; }
.clearRight { clear: right; }
</style>
</head>
<body>
<div class="example">
<p><iframe src="example.html" class="example1">代替内容</iframe></p>
<p>インラインフレームの右側にテキストを回り込ませた例です。</p>
<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
<p class="clearLeft">回り込みを解除しました。</p>
</div>
<div class="example">
<p><iframe src="example.html" class="example2">代替内容</iframe></p>
<p>インラインフレームの左側にテキストを回り込ませた例です。</p>
<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
<p class="clearRight">回り込みを解除しました。</p>
</div>
</body>
</html>
- 表示例
-
インラインフレームの右側にテキストを回り込ませた例です。
サンプルテキスト。サンプルテキスト。サンプルテキスト。
回り込みを解除しました。
インラインフレームの左側にテキストを回り込ませた例です。
サンプルテキスト。サンプルテキスト。サンプルテキスト。
回り込みを解除しました。