float を使用したあとのスマートなclear:both

本文中に画像の入ったブロックなどを入れるときに、float:right などとして右に寄せたとする。このとき、画像ブロックの縦の長さが外側の本文ブロックの長さより長いと下側にはみ出てしまう。これを防ぐために、clear:both でfloatをクリアする。

clear:both のスマートな使い方がわかったので書いておく。

参考にしたページは以下である。

従来から言われているように、以下のclassを定義し、クリアを行う必要がある箇所にダミーのブロックとして挿入していた。ダミーのブロックは、

<div class="c-both"></div>

のような具合だ。

.c-both
{
        clear:both; display:block; visibility:hidden;
}

こんな風に使っていた。

<div class=”main-content”>
本文がここにくる。
<div class=”picture-box”>
画像がここにくる
</div>
本文のつづき。
<div class=”c-both”></div>
</div>

CSS 2ではafterという擬似要素を使って、ある要素の後ろに文字列を追加することができる。これをうまく使った方法がある。以下のようにクラスを定義する。これなら、いちいちダミーの要素を挿入する必要がなく、きれいである。

ちなみに drupal でもこのクラスを定義してある。(module/system/default.css)

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

使い方はこんな具合になる。

<div class=”main-content” “clearfix”>
本文がここにくる。
<div class=”picture-box”>
画像がここにくる
</div>
本文のつづき。
</div>

なんと、clear:both しなくても解決できるのだそうだ。そのためには、外側のブロック要素に、overflow: auto; を付けるだけでよい。たとえば、外側のクラスがmain-contentだとして、

.main-content {
    ....
    overflow: auto;
}

使い方はこんな具合になる。

<div class=”main-content”>
本文がここにくる。
<div class=”picture-box”>
画像がここにくる
</div>
本文のつづき。
</div>

あなたも好きかも