float: ***;

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

float は、フロート（浮動化）を指定するプロパティです。

このプロパティをtable要素に対して設定すると、表をフロートさせることができます。（表を左か右に寄せて、逆側にテキストなどを回り込ませることができます）


table.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.exampleA {
width: 100%;
margin-bottom: 3em;
}

table {
width: 50%;
border: 2px #2b2b2b solid;
}
td, th {
border: 2px #2b2b2b solid;
}

table.example1 {
float: left;
}
table.example2 {
float: right;
}

.clearLeft {
clear: left;
}
.clearRight {
clear: right;
}

</style>

</head>
<body>

<div class="exampleA">

<table class="example1">
<tr>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
</tr>
</table>

<p>表の右側にテキストを回り込ませた例です。</p>
<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>

<p class="clearLeft">回り込みを解除しました。</p>

</div>


<div class="exampleA">

<table class="example2">
<tr>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
</tr>
</table>

<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;
}

table, td, th {
border: 2px #2b2b2b solid;
}

div.exampleB table {
width: 130px;
margin-right: 20px;
float: left;
}

.clearLeft {
clear: left;
}

</style>

</head>
<body>

<div class="exampleB">

<table>
<tr>
<th>見出し</th>
</tr>
<tr>
<td>データ</td>
</tr>
<tr>
<td>データ</td>
</tr>
</table>

<table>
<tr>
<th>見出し</th>
</tr>
<tr>
<td>データ</td>
</tr>
<tr>
<td>データ</td>
</tr>
</table>

<p class="clearLeft">回り込みを解除しました。</p>

</div>

</body>
</html>
表示例
見出し
データ
データ
見出し
データ
データ

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