floatの回り込み解除にclearfixを使う

2012-08-04 02:47:58

<サンプル>


ヘッダーなどでサイトロゴの横にバナーを置く時に回り込みの解除が必要になってきます。背景画像があるカラムの中でfloatを使って回り込みをすると、背景画像が表示されなくなります。そこで背景画像を指定しているタグにclearfixを使えばちゃんと背景が表示されるようになります。clearfixは便利なのでサイト毎に必ず宣言しています。オーストラリア人のTony Aslettという方が、cleafixを考案したらしい。

<CSS>


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

.cf{
    min-height:1px;
}

* html .cf{
    height:1px;
}
普通は宣言名を「clearfix」にするのが一般的なのだが、入力が面倒なので「cf」と省略していつも使っています。

<HTML>


<div class="cf">
    <div style="float:left;">サイト名</div>
    <div style="float:right;">バナー</div>
</div>
カテゴリ: CSS