スタイルシート［CSS］/イメージ/文字の回り込みを解除する

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

</style>

</head>
<body>

<div id="example1">

<img src="image/photo.jpg" alt="サンプル" width="200" height="133" id="example2">
<p>回り込み</p>
<p>回り込み</p>
<p class="clear">回り込みを解除</p>

</div>

</body>
</html>

▼これをブラウザで見ると次のように表示されます

回り込み

回り込みを解除

文字の回り込みを解除する

clear: ***;

使用例