clearプロパティ。

CSSに於いて、floatプロパティでフロートされたボックスに対する廻り込みの解除指定・clearプロパティに関する解説です。

clearプロパティとは。

clearプロパティは、floatプロパティでフロートされたボックスに対する廻り込みの解除指定です。

floatプロパティでボックスが左か右に配置された場合、後続のテキストは反対側に廻り込むように流し込まれます。

clearプロパティで解除すると、それ以降はフロートされたボックスの真下に配置されるようになります。

clearプロパティの書式は、以下のようになります。

clear: 値

値としては、以下のものが取れます。

例えば、見出し(<h○>要素)で左フロートに対する廻り込みを解除したい場合は、

h1, h2, h3, h4, h5, h6 {
    clear: left;
    }

と記述します。

この場合、例えば、

img {
    float: left;
    }

と画像(<img>要素)が常に左フロートされるようになっていても、見出しが現れる度に画像に対する廻り込みが解除されます。

HTMLで同様の機能を<br>要素のclear属性で実現出来ますが、<br>要素はインライン要素です。

一方、clearプロパティは仕様上、ブロックレヴェル要素に限って有効とされております。

このため、(好ましいかどうかはともかく、)<br>要素で廻り込みを解除するスタイルシートを作る場合は、displayプロパティにblock値を当てる必要があります。

すなわち、左フロートに対する廻り込みを解除する場合は、

br {
    display: block;
    clear: left;
    }

と記述します。

ネットスケープ 4.xでもclearプロパティには特に問題はありませんが、floatプロパティの問題があります。

WAP 2.0では、clearプロパティは必須ですが、オープンウェーヴ社のWAP 2.0 ウェブブラウザには実装されておりません。