danna labo. vol.3

Clearfixハックの紹介(?)

ここ最近年のせいか、物覚えが悪くなったので、CSS備忘録としてclearfixハックを書き留めておきます。
CSSレイアウトで制作を行っていると、必ず遭遇する問題。clearfixという名称がついている事を知らず、改めて知識のなさを痛感しました。(よく使っていたハックではあるのですが。。。)

親ボックスの高さを拡張させるCSSハック -clearfix-

上記の場合で、親ボックスが子ボックスを内包する対処方法が以下。

/*親ボックス */

.oya {
width: 500px;
}

/* 以降clearfixハック */

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

.oya { display: inline-block; }

/* Except MacIE ¥*/
* html .oya { height: 1%;}
.oya { display: block; }
/* End */

これから制作する時は、上のソースを貼付けるようにしようっと。
で、とある解説で、この現象は親ボックスの高さはfloat指定されていない要素で決まるからとの事ですが、 実際、子ボックス2にfloat要素が指定されている場合でもこの現象は起こったような気がします。
親ボックスの背景に画像を指定し、子ボックス内のテキスト等で高さを自動的に拡張するレイアウトの場合、 上記ハックを使う事が無難と言えるでしょう。