clear
clearは、ボックスの回り込みを解除するスタイルです。
解説
clearは floatスタイルで指定した回り込み表示の設定を解除する時に使用します。
なのでfloatを指定していない時に使用しても意味はありません。
構文
構文は以下になります。
clear: 値;
値
clearには以下の値が指定できます。
値 | 説明 |
---|---|
left | float:leftを解除する (例)clear:left; |
right | float:rightを解除する (例)clear:right; |
both | float:left、float:rightの両方を解除する (例)clear:both; |
none | 回り込みを解除しない(初期値) (例)clear:none; |
太字の値は初期値です。
サンプル
clearで回り込みを解除する
<div>
<img src="neko.png" alt="ねこ" style="float:right;">
我が家の猫です
</div>
<div>かわいいです</div>
<div style="clear:right;"></div>
<div>
<img src="inu.png" alt="いぬ" style="float:right;">
我が家の犬です
</div>

かわいいです

「かわいいです」は「clear:right」を指定する前なので回り込んでいることが確認できます。