【clear】回り込みを解除する

clearプロパティでは、floatで左寄せ、または右寄せで配置された要素への回り込みを解除することができます。 clearプロパティは、ブロックレベル要素に対して設定するようにして下さい。

またafter、beforeなどの疑似要素を使用し、そこにclearプロパティを指定することもできます。

なお値については、bothを指定すれば左右の要素に対する回り込みを解除できますので、基本的にはこれが使用されます。

書式

  • clear : ……… floatなどによる回り込みを解除する

★:left、right、both、none、inherit

left
左側の要素に対する回り込みを解除する
right
右側の要素に対する回り込みを解除する
both
左側、または右側に配置された全ての要素に対する回り込みを解除する
none
回り込みを解除しない(初期値)

使用した時の例

img.sample1 {float:left;}
img.sample2 {float:right;}
 
div {clear:both;}
<div>
<img class="sample1" src="sample.jpg" alt="" width="130" height="87">
画像にfloat:left;を指定しています。この下のdivの部分にclear:both;を指定し、
回り込みを解除しています
</div>
 
<div>
<img class="sample2" src="sample.jpg" alt="" width="130" height="87">
画像にfloat:right;を指定しています。:afterなどとclearを併せて使用することも
できます。
</div>

ブラウザ上の表示例

画像にfloat:left;を指定しています。この下のdivの部分にclear:both;を指定し、 回り込みを解除しています
画像にfloat:right;を指定しています。:afterなどとclearを併せて使用することも できます。

対応ブラウザなどのデータ

初期値 none 値の継承 継承しない
適用可能な要素 ブロックレベル要素
メディア visual
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報