てんぽ: clearは「floatの解除」ではない

「CSSのclearプロパティは『floatの解除』である」と説明されることがあります。 これはほとんどの場合において正しいのですが、正確には、clearは上マージンの自動調整です。 （追記：CSS2.1では、上マージンの自動調整ではなく、上マージンが不足する場合に不足分を埋める「クリアランス」を設ける、という説明になります。）

仕様書（邦訳）にはclearについて、つぎのように書かれています。

非浮動ブロックボックスに適用される場合は，値は次の意味をもつ。

left

生成されるボックスの上マージンを増加し，上境界辺が，ソース文書のそれより以前の要素から生じたあらゆる左浮動ボックスの下外辺よりも下になるようにする。

clearは「floatの解除」ではない

ふたつのimg要素が、左フロート、右フロートの順で存在し、ふたつ目のimgでclear:leftした場合。

<p>
<img src="xxx.jpg" alt="左フロート" style="float:left">
<img src="xxx.jpg" alt="右フロート" style="clear:left; float:right">
フロートに後続するテキスト
</p>

フロートに後続するテキストはどこに流し込まれるでしょうか。 左フロートの右側か、それとも、左フロートの下で右フロートの左側か。

clearが「floatの解除」として働くなら「左フロートの下で右フロートの左側」になりそうです。 しかし実際は「左フロートの右側」です（IEはそうなりませんが）。

フロートは通常の流れから取り除かれています。つまり、ふたつのimgは両方とも通常の流れにないために、テキストはp要素内の最上部に流し込まれます。 clear:leftされたimgは（上マージンが増加して）左フロートよりも下に配置されますが、どちらのフロートも通常の流れに属さないことに変わりありません。 「floatが解除」されるなら、フロートは通常の流れに戻るべきです（floatの解除というべきはfloat:noneでしょう）。 というわけで、clearを「floatの解除」と表現しては正確さを欠くと思います。

clearとともにmargin-topは指定しないほうがいい

clearは上マージンを増加させるプロパティなので、margin-topの値を「上書き」します。 詳しくはCSSバグリストのclearを指定した要素ではフロートに対して上マージンを設置する(WinIE 5.x/6.0)/(Opera 6.0/7.x)を参照。

floatとclearをわかっていれば、2カラムも、幅可変3カラムも、サイドバーだけ幅固定で本文領域幅可変3カラムも、同一のHTMLでCSSを変更するだけで実現可能です。