トラブル克服&実験レポート / WebDevelopment  [WEB制作の正しい作法]  

ClearBoth を使う時、行間などを空けるには注意が必要です。
先の例でいうとFooter部分をもう少し下げようとして
Marginを指定するとおかしなことになります。
Footerにマージンを上方向に30ピクセル追加してみます。
HTML例題を各ブラウザで検証してみてください。
■HTML例：例題 このようにIE6ではきちんとマージンが効きますが、Firefoxでは効果ありません。
これも実は、FIrefoxの方がCSSの仕様通りに表示されているのです。
さきほど、ClearBothを指定しないと外側Boxの高さが確保されずに潰れてしまいましたが
あれと同じ理由でCSSの正しい仕様ではFloatを指定した要素を認識しません。
そのためマージン上限の基準が、IE6と違い、外側BOXの上端になるのです。 その証拠にマージンの長さを要素の高さ以上に指定するとFrefoxでもきちんとマージンが確保されます。
■HTML例：例題 もちろん、その分、IE6では大幅にマージンが空いてしまいます。
それでは、同じ表示にするには、どうするかというと、ここでもマージンとパディングで使った手法を採用します。
つまり、パディングを使います。
■HTML例：例題 ただしパディングを使うときは背景色を透明(transparent)にします。
これでIE6以降とモダンブラウザで同じ表示になります。
※ どうしても要素に色を付けたいときはClearboth要素をFooter にせずマージン専用のつっかえ棒と考え、真下に要素を追加し、それを色付きのfooterにします。

※：ClearBothを使用するより、もっと効率的でスマートな手法は次の記事をご覧ください。