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>
