[新着] Webテンプレートを仮オープンしました
clear は、回り込みを解除するプロパティです。
float プロパティで left または right を指定している場合に使用します。この clear プロパティで回り込みを解除すると、それ以降の内容は表の下に続くことになります。
.example {
clear: both;
}
| clear | left … （表の右側にある回り込みを解除します） |
|---|---|
| right … （表の左側にある回り込みを解除します） | |
| both … （どちらの回り込みも解除します） | |
| none … （解除しない）デフォルト |
【IEの不具合】
回り込みが行われた範囲内で更に回り込みを行っている場合、子要素の回り込みを解除すると親要素の回り込みまで解除されてしまう場合があります。
【Netscapeの不具合】
表示モードが「互換モード」の場合、hr要素に対する clear プロパティの指定が無視されてしまいます。（hr要素に対して display: block の指定を行っておくと、この不具合を回避することができます。）
clearプロパティはブロック要素に対して指定します。（br要素に指定した場合でも回り込みを解除することができますが、br要素はインライン要素のため、文法的には誤った使い方となります。）
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
#example {
width: 100%;
}
table, td {
border: 2px #2b2b2b solid;
}
table {
width: 200px;
float: left;
}
.clear {
clear: both;
}
-->
</style>
</head>
<body>
<div id="example">
<table>
<tr>
<td>サーバーA</td>
<td>サーバーB</td>
</tr>
<tr>
<td>サーバーC</td>
<td>サーバーD</td>
</tr>
<tr>
<td>サーバーE</td>
<td>サーバーF</td>
</tr>
<tr>
<td>サーバーG</td>
<td>サーバーH</td>
</tr>
<tr>
<td>サーバーI</td>
<td>サーバーJ</td>
</tr>
</table>
<p>回り込み</p>
<p>回り込み</p>
<p class="clear">回り込みを解除</p>
</div>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
| サーバーA | サーバーB |
| サーバーC | サーバーD |
| サーバーE | サーバーF |
| サーバーG | サーバーH |
| サーバーI | サーバーJ |
回り込み
回り込み
回り込みを解除
