float: ***;

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
プロパティ

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つ目のボックス

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