float: ***;
- ブラウザ
- 特性
- float
float は、フロート（浮動化）を指定するプロパティです。
ボックスを左か右に寄せて、逆側にテキストなどを回り込ませることができます。
div {
width: 300px;
float: left;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| float | none | フロートさせない （初期値） |
| left | ボックスを左に配置して、後続の内容を右側に回り込ませる | |
| right | ボックスを右に配置して、後続の内容を左側に回り込ませる |
フロートを指定する場合は、「回り込みを解除する」もご覧ください。
【IEの不具合について】
IE 6以下では、次の不具合が発生する場合があります。（IE 7からは、この不具合は解消されているようです）
- 背景色（または背景画像）が設定された要素内でフロートを指定すると、回り込んだテキストの一部が消えたり、背景の一部が反映されなかったり、といった不具合が発生する場合があります。（親要素に対して幅（width）を指定しておくと、この不具合を回避することができます）
- フロートを指定した方向にマージンを設定すると、そのマージンの大きさが2倍になってしまいます。（例えば float: left を指定したボックスに margin-left: 30px を指定すると、そのマージンが 60px になってしまう）
フロートを指定する要素には、widthプロパティで幅を指定しておく必要があります。（置換要素を除く）
使用例
■テキストを回り込ませた例
<!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.exampleA {
width: 100%;
margin-bottom: 3em;
}
div.example1 {
width: 50%;
height: 150px;
background-color: #85b9e9;
float: left;
}
div.example2 {
width: 50%;
height: 150px;
background-color: #85b9e9;
float: right;
}
.clearLeft {
clear: left;
}
.clearRight {
clear: right;
}
</style>
</head>
<body>
<div class="exampleA">
<div class="example1">
<p>ボックスを左に配置</p>
</div>
<p>ボックスの右側にテキストを回り込ませた例です。</p>
<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。...</p>
<p class="clearLeft">回り込みを解除しました。</p>
</div>
<div class="exampleA">
<div class="example2">
<p>ボックスを右に配置</p>
</div>
<p>ボックスの左側にテキストを回り込ませた例です。</p>
<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。...</p>
<p class="clearRight">回り込みを解除しました。</p>
</div>
</body>
</html>
表示例
ボックスを左に配置
ボックスの右側にテキストを回り込ませた例です。
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
回り込みを解除しました。
ボックスを右に配置
ボックスの左側にテキストを回り込ませた例です。
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
回り込みを解除しました。
■ボックスを横に並べた例
<!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.exampleB {
width: 520px;
}
div.exampleB div {
width: 150px;
height: 100px;
margin-right: 20px;
background-color: #85b9e9;
float: left;
}
.clearLeft {
clear: left;
}
</style>
</head>
<body>
<div class="exampleB">
<div>1つ目のボックス</div>
<div>2つ目のボックス</div>
<div>3つ目のボックス</div>
<p class="clearLeft">回り込みを解除しました。</p>
</div>
</body>
</html>
表示例
1つ目のボックス
2つ目のボックス
3つ目のボックス
回り込みを解除しました。
- サイト内検索
