| プロパティ名 | 値 | 適用対象 | 継承 |
|---|---|---|---|
| clear: | どちら側の要素に 対して解除するか | ブロックレベル要素 | なし |
| 値 | 説明 | |
|---|---|---|
| どちら側の要素に 対して解除するか | left | 左側の要素に対する回りこみを解除。 |
| right | 右側の要素に対する回りこみを解除。 | |
| both | 両側の要素に対する回りこみを解除。 | |
| none | 回り込みを解除しない。(デフォルト)。 |
floatプロパティで指定した回り込みを解除するには、clearプロパティを使用します。回り込みを解除すると、通常の状態に戻り、回り込みが指定されている要素の下側に文字列が表示されるようになります。
サンプルソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<style type="text/css">
<!--
img.right{float: right;}
img.left{float: left;}
.sampl01{color:blue;}
hr{clear: both;}
p{color:red;
font-size:1.2em;
text-align:center
}
-->
</style>
</head>
<body>
<img src="画像ファイル" class="left">
<div class="sampl01">鹿苑寺（ろくおんじ）は、京都市北区にある臨済宗相国寺派の寺院。
寺名は足利義満の法名にちなむ。通称金閣寺（きんかくじ）、山号は北山（ほくざん）。
1994年（平成6年）に古都京都の文化財として世界遺産に登録された。中心となる建築物である舎利殿を
「金閣」、寺院全体を「金閣寺」と通称する。
<p>「float:right」で、画像を左側に配置して、文字列を画像の右側に表示。</p>
</div>
<hr>
<img src="画像ファイル" class="right">
<div class="sampl01">鹿苑寺（ろくおんじ）は、京都市北区にある臨済宗相国寺派の寺院。
寺名は足利義満の法名にちなむ。通称金閣寺（きんかくじ）、山号は北山（ほくざん）。
1994年（平成6年）に古都京都の文化財として世界遺産に登録された。中心となる建築物である舎利殿を
「金閣」、寺院全体を「金閣寺」と通称する。
<p>「float:left」で、画像を右側に配置して、文字列を画像の左側に表示。</p>
</div>
<hr>
<p>hr要素に「clear: both」を指定して回り込みを解除。</p>
</body>
</html>
