clear: ***;

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

clear は、回り込みを解除するプロパティです。

このプロパティは、floatプロパティによる回り込みを途中で解除したい場合に使用します。


.example {
clear: left;
}
プロパティ名 値 説明
clear none 回り込みを解除しない （初期値）
left 左フロートに対する回り込みを解除
right 右フロートに対する回り込みを解除
both どちらの回り込みも解除

使用例


<!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.example {
width: 100%;
}

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

div.example table {
width: 180px;
float: left;
}

.clearLeft {
clear: left;
}

</style>

</head>
<body>

<div class="example">

<table>
<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>

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

左フロートに対する回り込み。

サンプルテキスト。サンプルテキスト。サンプルテキスト。

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