構造のマークアップなしでフロートをクリアする方法

前回も書きました、フロートをクリアする裏技（笑）、clearfix技ですが、もう一つ紹介しておきます。Tony Aslett氏が考え出した書き方とのこと。これは便利！是非お使い下さい（笑）

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

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

便利なclearfix

ボックスをfloatさせた後、回りこみがおかしくなったりmarginが効かなくなったりと、あれこれとややこしいfloatの解除。そこで登場する、便利なcssがこのclearfix。有名なので是非活用されたし。使い方は、clearしたい親要素に下記のCSSを適応するだけ。（クラス名は適当になにか付けて下さい）

.clrfix:after {
　　content: ".";
　　display: block;
　　visibility: hidden;
　　height: 1%;
　　line-height: 0;
　　clear: both;
　　margin-bottom:15px;
}

IE7はこれに対応していないので、IE7用に下記を指定。

*:first-child+html .clrfix{
　　display: inline-block;
　　zoom: 100%;
　　margin-bottom:15px;
}

個人的に使い勝手がいいのと思うのは下記のソース。だいたいはこちらのほうで問題ありませんでした。

.entry {
	overflow: hidden;
}

.entry:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}

/*\*/
* html .entry {
    height: 1em;
    overflow: visible;
}
/**/

clearfixは他にも色々な亜種も存在しますので、一番使いやすいものを使用するのがいいカモ。