clearでできてしまう余白(スペース)を無くしたい

【覚え書き】

CSS でレイアウトを決めるとき、div ブロック等を使って左右カラムに分けたレイアウトをする場合など、float で配置することがよくあります。
そんなとき、カラムの高さサイズを合わさせてあれば、その下に続くレイアウトも崩れることなく表示してくれますが、高さが成り行きだったりすると、どうしても一度を float をリセットさせる必要が出てきます。

そこで使うのが clear になりますが、float のあとが横いっぱいのレイアウトならいいのですが、そうとばかりは限りません。
サムネイル画像を並べたいときなんかは、float を4つ並べて次の段もサムネイルの繰り返し、なんて配置もありますし。

手っ取り早いのは、空の div ブロックを入れて一度、float を解除してしまうのがいいのですが、Internet Explorer 6 の場合、一行分の空白(スペース)が入ってしまうことがあり、やっかいです。

というわけで、下記のような設定をすると、よけいな余白(スペース)は入らなくなるようです。

[CSS]
.clear-float {
    clear: both;
    font-size: 1%;
    line-height: 1%;
    width: 1%;
}

[HTML]
<div class="clear-float"></div>
追記

IE 6 の場合のみ
float を使っているブロックの親ブロックに padding-top を指定すると、float ブロックに影響を与えてしまうことがあるので注意が必要です。
(padding-top と同じ分の余白が出来てしまいます)


この記事へのコメント


この記事へのトラックバック