clear-fix 決定版

CSSでレイアウトを組んでいるとどうしてもfloatを使わざるを得ない場合がありますよね。
そんな時にクロスブラウザ対応でfloatを解除するのが通称“clear-fix”と呼ばれるテクニックな訳です。

株式会社ブレイドで制作させていただいている案件でも例に漏れずこのテクニックを使用しているのですが、今回決定版とでも呼べるソースを書き記しておこうと思います。

以下がそのソースです。

/*-------------------------------------------------------------------
clear-fix
-------------------------------------------------------------------*/
.cn:after
{
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}

/* Win IE7 */
*:first-child+html .cn
{
height: 1%;
}
/* End Win IE7 */

/* Win IE6 \*/
* html .cn
{
height: 1%;
}
/* End Win IE6 */

/* Mac IE\*//*/
.cn
{
display: inline-table;
}
/* End Mac IE */

.cnという部分がセレクタ名の指定になります。
上記のソースはvalidatorにも通ります。
通常は効率を優先してclass名にclear-fixを指定して使用できるようにすると思いますが、当社では（X）HTMLソースの判読性を優先して、個々のセレクタ名に対してスタイルを指定しています。
ただし、CSSのソースコードとしては膨大な量になってしまいますので熟慮の上ご使用ください。