Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

clear

手前に存在しているフロートされた要素(浮動要素)の回り込みを解除します。

サンプルコード

div.test { float: none;}
div.test1 { float: left;}
div.test2 { float: right;}

指定可能な値一覧

値	概要
none	手前に存在している浮動要素の回り込みを解除しません。この『none』が初期値です。
both	手前に存在している浮動要素の回り込みを全て解除します。
left	手前に存在している『float』プロパティが『left』となっている浮動要素の回り込みを解除します。
right	手前に存在している『float』プロパティが『right』となっている浮動要素の回り込みを解除します。

ブラウザでの表示結果

<div style="float: left; width: 200px; background-color: #ff0;">ここはdiv要素です。『float: left』、『width: 200px』と指定しています。</div>
<p style="clear: left;">ここはp要素です。『clear: left』と指定し、手前にいる浮動要素の回りこみを解除しています。</p>

<div style="float: right; width: 200px; background-color: #ff0;">ここはdiv要素です。『float: right』、『width: 200px』と指定しています。</div>
<p style="clear: right;">ここはp要素です。『clear: right』と指定し、手前にいる浮動要素の回りこみを解除しています。</p>

<div style="float: left; width: 200px; background-color: #ff0;">ここはdiv要素です。『float: left』、『width: 200px』と指定しています。</div>
<p style="clear: both;">ここはp要素です。『clear: both』と指定し、手前にいる浮動要素の回りこみを解除しています。</p>

対応ブラウザ

IE6	IE7	IE8	IE9	IE10	IE11	Safari	Chrome	Firefox	Opera

iPhone Safari	Android2系標準ブラウザ	Android4系標準ブラウザ

概要

手前に存在しているフロートされた要素(浮動要素)の回り込みを解除します。

厳密には手前にいる浮動要素の回りこみを解除しているというわけではなく、手前にいる浮動要素の高さと同じだけの上方向のマージンを自動生成するという処理が行われています。自動生成された上方向のマージンは『クリアランス』と呼ばれます。ちなみに、『clear』プロパティと『margin-top』プロパティを同時に指定してしまった場合は『clear』プロパティで生成した『クリアランス』が優先されますのでご注意ください。

<div style="float: left; width: 200px; background-color: #ff0;">ここはdiv要素です。『float: left』、『width: 200px』と指定しています。</div>
<p style="clear: both; margin-top: 1000px;">ここはp要素です。『clear: both』、『margin-top: 1000px』と指定しています。『クリアランス』が優先されるため、上方向のマージンは『1000px』になりません。</p>

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

WebProgrammingPortalウェブプログラミングポータル