CSSの裏技その1「clearfixハック」

よく使われるCSSの裏技です。名前は「clearfixハック」！

主にWindowsIE6が対象です。

これは下の英語文を訳すと「.clearfixクラスは（内側の）フロートされた要素の周りをブロック要素で囲っているクラスです。」ということです。実際使ってみるとよく分かりますが、よくfloatしているブロック要素を囲っているブロック要素が高さを指定しないとつぶれて表示されてしまうことがありますが、その問題点を回避する裏技的なクラスです。

必見です。

/* .clearfix class wraps enclosing block element around inner floated elements */
.clearfix:after
{
content: " ";
display: block;
visibility: hidden;
clear: both;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
}
* html .clearfix { display: inline-block; }
/* no ie mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* */