float は、回り込みを指定するプロパティです。
表を左か右に寄せて、逆側にテキストなどを回り込ませることができます。
#example {
float: left;
}
| float | left … （表を左に配置・テキストなどを右側に回り込ませます） |
|---|---|
| right … （表を右に配置・テキストなどを左側に回り込ませます） | |
| none … （指定なし）デフォルト |
回り込みを終了させるための clear プロパティもご覧ください。
【IEの不具合】
背景色（または背景画像）が指定された要素内で回り込みの指定を行うと、回り込ませたテキストの一部が消えたり、背景色の一部が反映されなかったり、といった不具合が発生する場合があります。（親要素に対してサイズの指定（width）を行っておくと、この不具合を回避することができます。）
■テキストの回り込み
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
#exampleA {
width: 100%;
}
table, td {
border: 2px #2b2b2b solid;
}
table {
width: 200px;
}
#example1 {
float: left;
}
#example2 {
float: right;
}
-->
</style>
</head>
<body>
<div id="exampleA">
<table id="example1">
<tr>
<td>HP作成A</td>
<td>HP作成B</td>
</tr>
<tr>
<td>HP作成C</td>
<td>HP作成D</td>
</tr>
<tr>
<td>HP作成E</td>
<td>HP作成F</td>
</tr>
</table>
<p>
表の右側に<br>
複数行のテキストを<br>
表示してみます
</p>
<p style="clear: left;">--- 回り込みを解除 ---</p>
<table id="example2">
<tr>
<td>HP作成A</td>
<td>HP作成B</td>
</tr>
<tr>
<td>HP作成C</td>
<td>HP作成D</td>
</tr>
<tr>
<td>HP作成E</td>
<td>HP作成F</td>
</tr>
</table>
<p>
表の左側に<br>
複数行のテキストを<br>
表示してみます
</p>
<p style="clear: right;">--- 回り込みを解除 ---</p>
</div>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
| HP作成A | HP作成B |
| HP作成C | HP作成D |
| HP作成E | HP作成F |
表の右側に
複数行のテキストを
表示してみます
--- 回り込みを解除 ---
| HP作成A | HP作成B |
| HP作成C | HP作成D |
| HP作成E | HP作成F |
表の左側に
複数行のテキストを
表示してみます
--- 回り込みを解除 ---
■表を横に並べる
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
#exampleB {
width: 450px;
}
table, td {
border: 2px #2b2b2b solid;
}
#exampleB table {
width: 200px;
margin-right: 20px;
float: left;
}
-->
</style>
</head>
<body>
<div id="exampleB">
<table>
<tr>
<td>HP作成A</td>
<td>HP作成B</td>
</tr>
<tr>
<td>HP作成C</td>
<td>HP作成D</td>
</tr>
<tr>
<td>HP作成E</td>
<td>HP作成F</td>
</tr>
</table>
<table>
<tr>
<td>HP作成G</td>
<td>HP作成H</td>
</tr>
<tr>
<td>HP作成I</td>
<td>HP作成J</td>
</tr>
<tr>
<td>HP作成K</td>
<td>HP作成L</td>
</tr>
</table>
<p style="clear: both;">表を並べてみました</p>
</div>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
| HP作成A | HP作成B |
| HP作成C | HP作成D |
| HP作成E | HP作成F |
| HP作成G | HP作成H |
| HP作成I | HP作成J |
| HP作成K | HP作成L |
表を並べてみました
