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

2012-08-04    606   1517

<サンプル>



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

<CSS>


※2019-04-20追記
現在はコードが短くスッキリしています。使用方法は変わりません。
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
下記は古くて長いコードになります。
.cf:after{
    content: ".";
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
}

.cf{
    min-height:1px;
}

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

<HTML>


回り込みをしているものを囲んでいる親の要素にclearfixのクラスを付けて下さい。
<div class="cf">
    <div style="float:left;">サイト名</div>
    <div style="float:right;">バナー</div>
</div>

カテゴリ: CSS

comment 登録なしでご自由にご入力いただけます(^^)ぜひぜひ記事のご感想をお聞かせ下さい。

お名前とコメントは入力必須です。

コメントの文字数が短すぎます。

この内容でコメントを送る
コメントをする

目が疲れている方向けにラジオ系Youtubeを始めました

オススメのCSSに関する記事

この記事がお役に立てましたら是非シェアのご協力お願いします。