clearプロパティは floatプロパティで指定された要素の回り込み(浮動化)の効果を解除します。clearプロパティは br要素の clear属性と同様の働きをすることと、CSS1 ではすべての要素が適用対象であったこともあって、br要素に指定されていることが多く、どの UA においてもそれで回り込みの解除が反映されるのですが、正確には CSS2 の仕様より適用対象がブロック要素のみに変更されています。
noneleftrightbothinheritnoneclearプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。
noneleftfloat : left ;)を解除するrightfloat : right ;)を解除するfloat : left ; float : right ;)を解除するclearプロパティに "none" 以外の値を指定し、要素の回り込みを解除すると、回り込みを指定された要素のボックスの枠の上端が回り込みを解除する要素の下端にくるまで、上のマージン(margin-top)が必要分増やされることになります。つまり、回り込みを解除する要素のボックスは、回り込みを指定された要素の下端まで押し下げられます。なお、CSS2.1 では上のマージン(margin-top)で回り込みを解除する要素を下端まで押し下げられない場合は、「クリアランス」という空白を設けて、下端まで移動させる概念が導入されています。クリアランスは、回り込みを指定された要素のボックスのマージンの折り畳みを行って、仮の配置をした上で処理するとされています。
.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>