clear
floatによる回り込みを解除するプロパティ。
floatにより左右に寄せられた要素の次に続くテキストなどは、何もしなければfloat要素を回り込むかたちで表示されるが、clearを指定することでその回り込みを解除させることができる。
CSSレイアウトを行う際は、下記使用例のようにclear指定を行うボックス内に含まれるタグを、displayプロパティで非表示にすることで、体裁を崩さずに回り込みを解除することができる。
値
| left / right | 左右に寄せられた要素に対する回り込みを解除。 |
|---|---|
| both | 左右どちらかに寄せられた要素の回り込みを解除。 |
| none | 初期値。回り込みを解除させない場合はこれを指定。 |
使用例
[CSSの記述]
.sampleA1 { float:left; }
.sampleA2 { clear:left; }
.sampleA2 hr { display:none; }
[HTMLの記述]
<img alt="" src="hogehoge.gif" class="sampleA1" /> <p>テキストテキストテキストテキストテキスト.....</p> <div class="sampleA2"><hr /></div> <p>テキストテキストテキストテキストテキスト.....</p>
[ブラウザ上の表示]
floatを指定し左側に寄せたimgタグ（画像）の反対側に、それに続くテキストが回りこみます。
clearを指定することで、それ以下の要素の回り込みが解除されます。