float: ***;
ブラウザ |
|
---|---|
プロパティ |
float は、フロート(浮動化)を指定するプロパティです。
ボックスを左か右に寄せて、逆側にテキストなどを回り込ませることができます。
div {
width: 300px;
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.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: 300px;
}
div.exampleB div {
width: 90px;
height: 90px;
margin-right: 10px;
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つ目のボックス
回り込みを解除しました。