clearプロパティ

TOPページに戻る > CSS

clearプロパティ

指定した要素の回り込みを解除できます
値にleftを指定すると左の回り込みを解除、rightを指定すると右の回り込みを解除できます。値にbothを指定すると左と右、両方の回り込みを解除できます
clearプロパティはfloatプロパティを使った後に回りこみを解除するためにつかうプロパティです
floatプロパティで回り込みした後はclearプロパティで回り込みを解除しておくと次にfloatプロパティを使う時に影響を受けないで済みます
clearプロパティを適用できるのはブロック要素です。インライン要素には適用できません
※br要素にclearプロパティを使っても回り込みを解除することはできます。ブラウザで表示すると回り込みを解除していますが文法的には間違いです

使い方（書式）

セレクタ { clear: 値; }                                    

clearプロパティ

対応ブラウザ
適用できる要素	ブロック要素
子要素へのスタイルの継承	しない

プロパティの値	説明
both	左と右の回りこみを解除する
left	左の回りこみを解除する
right	右の回りこみを解除する
none	解除しない。これが初期値

実際の指定方法

div要素を2つ横に並べる方法

.hoge {
 float: left;    /* 左に回り込ませる */
 width: 300px;   /* 要素の横幅を指定 */
 border: solid;  /* 枠線を表示 */
  }

.hogebox {
 width: 100px;   /* 要素の横幅を指定 */
 border: solid;  /* 枠線を表示 */
  }

.clear2 {
 clear: both;    /* 要素の回り込みを解除する */
 width: 100px;   /* 要素の横幅を指定 */
 border: solid;  /* 枠線を表示 */
 }

html部分

<p>実際の表示 普通のboxまでfloat: left;の影響を受けています</p>
<div class="hoge">1番目のbox 左に回り込ませます</div>
<div class="hoge">2番目のbox 左に回り込ませます</div>
<div class="hogebox">普通ののbox</div>

<p>実際の表示 clearプロパティを使うと回り込みを解除できます</p>
<div class="hoge">1番目のbox 左に回り込ませます</div>
<div class="hoge">2番目のbox 左に回り込ませます</div>
<div class="clear2">解除したbox</div>

実際の表示 普通のboxまでfloat: left;の影響を受けています

実際の表示 clearプロパティを使うと回り込みを解除できます