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>
表示例
インラインフレームの右側にテキストを回り込ませた例です。
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
回り込みを解除しました。
インラインフレームの左側にテキストを回り込ませた例です。
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
回り込みを解除しました。
- サイト内検索