float: ***;
- ブラウザ
- 特性
- float
float は、フロート（浮動化）を指定するプロパティです。
このプロパティをtable要素に対して設定すると、表をフロートさせることができます。（表を左か右に寄せて、逆側にテキストなどを回り込ませることができます）
table.example {
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;
}
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>見出しセル1</th>
<th>見出しセル2</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
<tr>
<td>データセル3</td>
<td>データセル4</td>
</tr>
<tr>
<td>データセル5</td>
<td>データセル6</td>
</tr>
<tr>
<td>データセル7</td>
<td>データセル8</td>
</tr>
<tr>
<td>データセル9</td>
<td>データセル10</td>
</tr>
</table>
<p>表の右側にテキストを回り込ませた例です。</p>
<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。...</p>
<p class="clearLeft">回り込みを解除しました。</p>
</div>
<div class="exampleA">
<table class="example2">
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
<tr>
<td>データセル3</td>
<td>データセル4</td>
</tr>
<tr>
<td>データセル5</td>
<td>データセル6</td>
</tr>
<tr>
<td>データセル7</td>
<td>データセル8</td>
</tr>
<tr>
<td>データセル9</td>
<td>データセル10</td>
</tr>
</table>
<p>表の左側にテキストを回り込ませた例です。</p>
<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。...</p>
<p class="clearRight">回り込みを解除しました。</p>
</div>
</body>
</html>
表示例
| 見出しセル1 | 見出しセル2 |
|---|---|
| データセル1 | データセル2 |
| データセル3 | データセル4 |
| データセル5 | データセル6 |
| データセル7 | データセル8 |
| データセル9 | データセル10 |
表の右側にテキストを回り込ませた例です。
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
回り込みを解除しました。
| 見出しセル1 | 見出しセル2 |
|---|---|
| データセル1 | データセル2 |
| データセル3 | データセル4 |
| データセル5 | データセル6 |
| データセル7 | データセル8 |
| データセル9 | データセル10 |
表の左側にテキストを回り込ませた例です。
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
回り込みを解除しました。
■表を横に並べた例
<!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: 650px;
}
table, td, th {
border: 2px #2b2b2b solid;
}
div.exampleB table {
width: 300px;
margin-right: 20px;
float: left;
}
.clearLeft {
clear: left;
}
</style>
</head>
<body>
<div class="exampleB">
<table>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
<tr>
<td>データセル3</td>
<td>データセル4</td>
</tr>
</table>
<table>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
<tr>
<td>データセル3</td>
<td>データセル4</td>
</tr>
</table>
<p class="clearLeft">回り込みを解除しました。</p>
</div>
</body>
</html>
表示例
| 見出しセル1 | 見出しセル2 |
|---|---|
| データセル1 | データセル2 |
| データセル3 | データセル4 |
| 見出しセル1 | 見出しセル2 |
|---|---|
| データセル1 | データセル2 |
| データセル3 | データセル4 |
回り込みを解除しました。
- サイト内検索
