Go to information

clear

clearプロパティは floatプロパティで指定された要素の回り込み(浮動化)の効果を解除します。clearプロパティは br要素の clear属性と同様の働きをすることと、CSS1 ではすべての要素が適用対象であったこともあって、br要素に指定されていることが多く、どの UA においてもそれで回り込みの解除が反映されるのですが、正確には CSS2 の仕様より適用対象がブロック要素のみに変更されています。

初期値
none
適用対象
ブロック要素
継承
しない
メディア
visual

clearプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。

none
回り込み(浮動化)を解除しない
left
左側の回りこみ(float : left ;)を解除する
right
右側の回り込み(float : right ;)を解除する
both
左右両側の回り込み(float : left ; float : right ;)を解除する

clearプロパティに "none" 以外の値を指定し、要素の回り込みを解除すると、回り込みを指定された要素のボックスの枠の上端が回り込みを解除する要素の下端にくるまで、上のマージン(margin-top)が必要分増やされることになります。つまり、回り込みを解除する要素のボックスは、回り込みを指定された要素の下端まで押し下げられます。なお、CSS2.1 では上のマージン(margin-top)で回り込みを解除する要素を下端まで押し下げられない場合は、「クリアランス」という空白を設けて、下端まで移動させる概念が導入されています。クリアランスは、回り込みを指定された要素のボックスのマージンの折り畳みを行って、仮の配置をした上で処理するとされています。

clearプロパティの実装状況

Windows版Internet Explorer
Firefox
Opera
Safari
Macintosh版Internet Explorer 5

サンプル

記述例
.float { float : right ; }
p      { width : 30em ; }
.clear { clear : both ; text-align : right ; }
......
<p><img src="image.gif" alt="工事中" class="float" />
ご迷惑をお掛けしております。1月20日から2月1日まで
下水道工事のため橋は工事中のため、左折して迂回してください。</p>
<p class="clear">株式会社W3G工業</p>
表示例
現在位置
  1. W3G
  2. CSS
  3. 表示と配置
  4. clear
ナビゲーション
ステータス情報
作者
上田 遼
公開
2007-02-02T16:07:41+09:00
更新
2008-12-29T04:30:37+09:00
URI
http://w3g.jp/css/display_position/clear
検索