clear

CSSプロパティ「clear」の解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

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を指定することで、それ以下の要素の回り込みが解除されます。