CSS3スタイル虎の巻

clear

clearは、ボックスの回り込みを解除するスタイルです。

解説

clearは floatスタイルで指定した回り込み表示の設定を解除する時に使用します。
なのでfloatを指定していない時に使用しても意味はありません。

構文

構文は以下になります。

clear: 値;

clearには以下の値が指定できます。

説明
leftfloat:leftを解除する
(例)clear:left;
rightfloat:rightを解除する
(例)clear:right;
bothfloat: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」を指定する前なので回り込んでいることが確認できます。

関連項目

  • clear:ボックスの回り込みを解除する
  • float:ボックスの回り込みを指定する