スタイルシート［CSS］/テーブル/回り込みを解除する

*clear: ***;*

ブラウザ
特性: clear

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

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


.example {
clear: left;
}

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

clearプロパティは、ブロックレベル要素に対して指定します。（br要素に指定した場合でも回り込みを解除することができますが、br要素はインライン要素のため、文法的には誤った使い方となります）

使用例


<!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: 300px;
float: left;
}

.clearLeft {
clear: left;
}

</style>

</head>
<body>

<div class="example">

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

</body>
</html>

表示例

見出しセル1	見出しセル2
データセル1	データセル2
データセル3	データセル4
データセル5	データセル6
データセル7	データセル8
データセル9	データセル10

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

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

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

サイト内検索

テーブル

回り込みを解除する

clear: ***;

使用例

関連ページ

*clear: ***;*