親ボックスで子ボックスのfloatを解除 （clearfixのいろいろ）

親ボックスで子ボックスのfloatを解除　（clearfixのいろいろ） - Hato-Style

親ボックスで子ボックスのfloatを解除　（clearfixのいろいろ）

2007年03月09日 （金）

* XHTML/CSS

CSSレイアウトにおける、floatを良い感じにclearさせる俗に言うclearfixと言う手法がある。floatをclearさせるための要素が無い場合、clearさせるために要素（
みたいな要素）を追加したりしなくても、floatされる要素を包含する親ボックスでfloatをclearしてしまうというスグレモノ。

仕組みは、FirefoxやSafariに代表されるモダンブラウザでは親ボックスで:after疑似要素を使うことで、clearさせる。

:after疑似要素に対応していないIE向けには、親ボックスに横幅（width）を入れることで解決。しかしこれだとMacIEで崩れるのでMacIEだけにHolly Hackなどを組み合わせてdisplay: inline-table;指定してやる。

HTMLソース

左側テキスト、左側テキスト

右側テキスト、右側テキスト

CSSソース

#box{
width: 720px;
background: #ff0000;
}

/* モダンブラウザ向けclear */
#box:after{
display: block;
height: 0;
visibility: hidden;
clear: both;
content: ".";
}

/* MacIE用 */
/*\*//*/
display: inline-table;
/* */

#text1{
width: 200px;
float: left;
background: #ffffff;
}

#text2{
width: 510px;
float: right;
background: #ffffff;
}

仮に親ボックスにpaddingやらborderやらを入ったりしていて、横幅を入れられない（widthを指定していない）場合。この場合はこのやり方だと上手く行かない。とくにIE系。モダンブラウザ向けの:after疑似要素のプロパティに加え、IE対策を別途施す必要がある。

まず、親ボックスにMacIE 5とWinIE 7向けにdisplay: inline-blockを指定。

/* 追加 MacIE 5 と WinIE 7 向け */
#box{
display: inline-block;
}

加えて、WinIE5〜6向けに高さを指定。WinIE5〜6とその他のモダンブラウザ向けに、display: block;を指定してやる。このときHolly Hackを使用してMacIE 5はスルーさせるようにする。

/*MacIE \*/
* html #box {height: 1em;}
#box {display: block;}
/* */

以上で、横幅が指定されていない場合の対処は終わりで、最終的には下記のようになる。一応CSS的にValidになっている。

/* モダンブラウザ向けclear */
#box:after{
display: block;
height: 0;
visibility: hidden;
clear: both;
content: ".";
}

* 追加 MacIE 5 と WinIE 7 向け */
#box{
display: inline-block;
}

/*MacIE \*/
* html #box {height: 1em;}
#box {display: block;}
/* */

一般的なclearfixのソースになった。CSS Nite Vol.16で、鷹野さんのプレゼンで紹介されていたコードと同じような感じになっている。

サンプル
親ボックスでフロートをクリアのサンプル

余談だけれど、WinIE 7には、親ボックスに min-height: 1em; を指定して崩れを回避することも出来る。実践Web Standards Designというオキニの書籍に書いてあってへぇ〜と思った。まー、どっちにしてもIE対策のためにあらゆる記述をしなきゃならないのでウザいと言えばウザイ気もするね...。

このほかにももっとスマートなclearfixが存在する。STOPN 'LISTEN 【IE7対応clearfix】さらに続報、コピペでつかえる主要ブラウザをclearするコード、[多分最終版]。WinIE5.5〜7に対応しつつ、ハックを使わずにスマートに実現できている。これは凄い。

div{
zoom:1;/*for IE 5.5-7*/
}
div:after{/*for modern browser*/
content:".";
display: block;
height:0px;
clear:both;
visibility:hidden;
}

しかしzoomプロパティはIEの独自拡張であり、MacIEには未対応でMacIEには別途処置する必要がある。また独自拡張であるが故にValidでなくなる。WinIE5.0も未対応なので、完全にターゲットを絞っている場合に限り有効という感じがする。無駄な記述を省き、思わぬトラブルを回避するため、可能ならば極力親ボックスにも横幅を指定しておくのが、正解かなと思った。

参考リンク

* Fsiki：CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件
* 構造のマークアップなしでフロートをクリアする方法

clearfixの決定版を作る －IE編－

スタイルシートをめぐる冒険: clearfixの決定版を作る －IE編－

clearfixの決定版を作る －IE編－

今回は、floatバグ対策における鬼門ともいえるIEのclearfixに挑戦する。しかし、その前に、何をもって「決定版」とするか、あらためておさえておこう。本来なら、ひとつでも多くの種類、バージョンのブラウザでfloatをクリアできる（もしくは同じ効果を得られる）ことをもって、決定版とすべきなのだろうが、ここでは少し違う方針をとりたいと思う。簡単にいえば、CSS自体の正しさとか美しさを優先したいということだ。逆に、そのためには古いバージョンのブラウザなどは犠牲になってもしょうがない、と考えている。ここでいう「決定版」を定義してみよう。

1. 文法的に正しいこと
このこととイコールとするには異論があるかもしれないが、「W3Cのvalidatorを通ること」と言い換えることもできる。少なくとも、通らないより通るほうがいい。

2. 内容的に理にかなっていること、意味不明でないこと
いわゆるCSSハックは、記述通りに理解しようとするとその多くが意味不明である。文法的に間違っていれば当然として、仮に文法的に正しかったとしても、そういったテクニックにはなるべく頼らないようにしたい。また、CSSプロパティを本来とは異なる目的で使用することもできる限り避けたい。

3. シンプルであること
極力無駄な記述を省き、1行でも短くする。

さて、前置きが長くなってしまったが、本論に入ることにする。今回のIE編の検証にあたって用意したスタイルシートとHTMLは以下の通りである。（サンプルページはこちら）
【スタイルシート】 /* その1 */ .clearfixforie1 { height: 1%; } /* その2 */ .clearfixforie2 { display: inline-block; } .clearfixforie2 { display: block; } /* その3 */ .clearfixforie3 { zoom: 1; } /* その4 */ .clearfixforie4 { overflow: auto; width: 100%; } /* その5 */ .clearfixforie5 { overflow: hidden; width: 100%; } /* モダンブラウザ向けclearfix */ .clearfix:after { content: url(pixel.gif); display: block; clear: both; height: 0; } /* ボックスの設定 */ .wrapper { width: 200px; } .box-A { background: #cccccc; margin-bottom: 10px; } .box-B { width: 100px; height: 100px; background: #000000; float: left; } .box-C { width: 100px; height: 50px; background: #666666; float: right; } 【HTML】

簡単に解説を。

その1の「height: 1%」は、IE向け記述の標準形。通常は、IE以外に適用させないために、いわゆるスターハックと組み合わせて、「* html .clearfix { height: 1%; }」という形で用いられる。別名、Holly Hackとも呼ばれる。（IE Escaping Floats Bug 参照）

その2の「display: inline-block」は、一般にIE7およびMac版IE向けの記述とされるもの。すぐその後に、「display: block」としているのは、Opera、Safari対策である（inline-blockについては、inline-blockの奇妙な世界 参照）。

その3の「zoom: 1」は、IE5.5以降の独自拡張であるzoomプロパティを利用した記述で、Holly Hackと同じ効果をCSSハックに頼ることなく得られる。

その4とその5は、IEに限らず全ブラウザが対象で、いわゆるclearfixのようなややこしいことをしなくてももっと簡単にfloatをクリアできる、としてよく紹介されているテクニックである。（CSS - Clearing floats 参照）

さらに、モダンブラウザへの影響を調べるために、全ブラウザ向けのその4とその5を除いては、after擬似要素を用いたモダンブラウザ向けclearfixも併記した。

このソースを用いて、各ブラウザで検証してみた結果は以下の通りである。
IEの場合 7.0 6.0 5.5 5.0
その1（height: 1%） ○ ○ ○ ○
その2（display: inline-block） ○ ○ ○ ×
その3（zoom: 1） ○ ○ ○ ×
その4（overflow: auto） ○ ○ ○ ×
その5（overflow: hidden） ○ ○ ○ ○
モダンブラウザの場合 Firefox2.0 Opera9.21 Netscape7.1 Safari1.0
その1（height: 1%） ○ ○ ○ ○
その2（display: inline-block） ○ ○ ○ ○
その3（zoom: 1） ○ ○ ○ ○
その4（overflow: auto） ○ ○ ○ ○
その5（overflow: hidden） ○ ○ × ○

この検証結果を踏まえて、消去法でclearfixの決定版を探っていこう。

まず、最初に候補から外れるのは、その4とその5のoverflowを用いた方法だ。値がautoではIE5.0がダメ（この表にはないがMac版IE5.xも）。hiddenでは、Netscape7.1がダメ。さらに、Netscape6ではauto、hiddenともにレイアウトくずれが発生する。また、IE6以前用にwidth: 100%としなければならないのも、同時にpaddingやborderが指定できない点で汎用的なクラスとしての使い勝手を狭めている。

と、ここまでは簡単なのだが、次のステップで早々につまづいてしまう。残りの3つとも、それぞれ一長一短があり、頭ひとつ抜けたものがないのだ。ブラウザへの対応状況を優先するなら文句なしに「height: 1%」だが、その意味不明の記述がどうしても引っかかる。しかし、ここで冒頭に掲げた決定版の定義をあらためて思い出して、強引に話を進めることにしよう。

まず、IE独自拡張のためvalidaterを通らない「zoom: 1」は外す。次に、IE5.0は無視することにして、「height: 1%」も外す。これで自動的に、IE向けclearfixの決定版は「display: inline-block」ということになった。しかも、inline-blockという値自体には、Operaでも、Safariでも、Mac版IEでもfloatクリア効果があるので、その目的で使用するのは理にかなったことともいえる。難は、すぐその後に「display: block」と続けなければならないところが、パッと見には「？」であることだが。

最後に、モダンブラウザ・IE両対応のclearfix決定版をまとめておこう。
.clearfix:after { content: url(pixel.gif); display: block; clear: both; height: 0; } .clearfix { display: inline-block; } .clearfix { display: block; }

次回は、Mac版IE向けclearfixの決定版を探り、このシリーズの最終回としたい。

clearfixはちゃんと考えられていた

clearfixはちゃんと考えられていた

clearfixはちゃんと考えられていた

* Posted by: wu
* 2007年5月26日 11:42
* XHTML CSS

clearfixの決定版を作るについてコメントしたのですが、なぜか僕のTypeKeyが認証失敗になってしまい、がんばって書いた文章がお伝えできず、消すのももったいないからこっちに書きます。

こんにちは。 僕も以前、clearfixの記述について、なぜあんなに複雑なのか疑問に思いました。CASE10の記述がfloatのclearに必要な最低限の記述とし、ピリオドやvisibility,heightは必要無いんじゃないかとさまざまなブラウザーで検証したのですが、contentで何かを記述しないとボックスが生成されずに正常にクリアできないブラウザーがありました。そして、生成したボックスを消すために、visibilityやheight:0が必要になりました。

モダンブラウザの中でも特にモダン（笑）なものに限ればCASE10だけで大丈夫のようです。ただやはりこういったものは出来るだけ多くのブラウザで同じ結果になったほうが喜ばしいので、ややモダンではないモダンブラウザを考えるとどうしても冗長になってしまいますね。

ああ、むくわれた。全ては上のコメントの通りです。

ホップ本でも「親ボックスの高さを算出させる方法」を7ページ使って解説しているのですが、この原稿を書くときに「本家clearfixの記述には絶対無駄がある！」と睨んで色々検証しました。

まず、contentプロパティになぜピリオドを入れるのかですが、たしかFirefox1.x(凄い細かいバージョン)かNNでは、空白でもなんでも何かを記述しないとボックスが生成されずにclearできませんでした。そして、記述した文字を消すために、height:0が必要になりました。 ところがheight: 0だけでは消えないブラウザがあり、visibility:hiddenが必要になって…　と、 結局本家の記述とまったく同じになりました。 NN6.xとFirefoxの1.x(凄い細かいバージョン)で問題があったことだけは覚えています。

どのブラウザがいつのバージョンのときにピリオドがないと有効にならないのかどうも思い出せないので、contentプロパティの値を空にしたclearfixを使ったページを張っておきます。3つの黄色いボックスが青い線に囲われていないブラウザがあったら…それだ!!　(本当はもう一度ちゃんと調べてきちんとした答えを出したいのですが、時間と環境がありません。すみません　ぺこぺこ)
もう１つ

clearfixはclassにしてHTML文書に埋め込むよりも、CSS内で対象となる要素をセレクタにもってきて内容をに当てて使ったほうが便利です。

div#content:after,
div#utilities:after,
ul#globalNavi:after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}

追記：関連記事

* 俗に言う clearfix と言われるコードのバリエーション色々
* clearfixハックは本当に必要なのか

関連エントリー

* HTML たん。
* Vicuna カスタマイズサイト Part2
* 何のための道具?
* HTMLは道具
* サブスキン CSS

* Newer: Vicunaのキーカラーを一発調整するCSSモジュール
* Older: CSSNite LP, Disc3 行ってきたよレポート

Comments:23

nori 2007年5月26日 16:36

clearfixの決定版を作るを書いたnoriです。なるほど、ピリオドには意味があったんですね（当たり前ですが）。少しスッキリしました。TypeKeyの認証失敗についてはチェックしてみます。
wu 2007年5月26日 17:10

Cくん、君のことは忘れない!
wu 2007年5月26日 17:14

noriさん、こんにちは。
そのようですね、ただこの記事の通り、ピリオドが無いと正しくクリアできないブラウザがなんなのか特定できていないので説得力がありませんが…。　
matou 2007年5月26日 19:18

はじめまして。Hop本の愛読者です。IE7では思いっきり青い枠が狭くなっていて、Boxの上部に鎮座されておりました。
最後の「もう一つ」の箇所、参考になります。classで指定することしか考えていませんでした。ぜひ試してみたいと思います。
wu 2007年5月26日 21:18

matouさん、こんばんは。 Hop本買っていただいてありがとうございます。

IE7はafter擬似要素に対応していないので、別の対処が必要になります。そしてややこしいことに、DOCTYPEスイッチによって互換モードと標準モードで方法が2つ存在しています。

ホップ本のp.188とp189(幅を明示できない場合)の2つの記述が僕の中でのclearfix決定版なので読んで見てくださいね。
osuko 2007年5月27日 13:17

clearfix本家とか、afterの記述以外に色々宣言がありますけど、これはなんですか？
wu 2007年5月27日 15:31

osukoさん、こんにちは。
clearfixには、レガシーブラウザでも同様の問題を解決させるための指定がなされています。ややこしいことに、レガシーブラウザーで解決するための記述は、モダンブラウザへは悪い影響を与える指定となるものがあります。
こちらを立ててはあちらが立たずとなってしまうので、特定のブラウザのみ読み込むハックテクニックを利用して宣言は複雑化しています。

MacIEを対象からはずすともっとさっぱりするでしょうし、IEがafter擬似要素に対応することで、clearfixはCASE10の記述のみで解決できるものとなるでしょう。

製作者がfloatの問題に直面したとき、特に知識もいらずにコピペで解決できるよう(あんまり良くない考え方ですが)に作られたものであって、できるだけ多くのブラウザで解決できるように作られているだと思います。　
豪 a.k.a aji 2007年5月28日 09:18

「値を空にしたclearfixを使ったページ」の色使いが凄くかっこいい。
ごめんなさい、内容に関係ないコメントで。
でも、ホンマにかっこいいです。
wu 2007年5月28日 13:56

ajiさんこんにちは。　ajiさんはコントラストの強くインパクトのあるデザインが好きなんですね。僕も大好きです。
関係ないコメント大歓迎です。
wu 2007年5月28日 20:21

はてぶコメントに感想を書くのはいいと思いますが、質問であるならこちらにして下さる答えやすいです。
どうぞお願いします。
e-luck 2007年5月29日 00:17

あぅ、トラックバック弾かれてるぅ
wu 2007年5月29日 09:31

がーん！
ois- 2007年5月29日 20:36

こんばんは。
on the next level　更新してください
おねがいします
wu 2007年5月29日 21:18

oisさん、こんばんは。
UOは僕のHDDから抹消されています…！
qeb 2007年6月 4日 10:39

はじめまして。
子要素がフロートしている親要素に対して幅を決めてあげて
それとoverflowをhiddenにすると、自動的に子要素の下まで
親要素が伸びます。
{ width: 100%; overflow: hidden; }
それでは、ダメですか？
p 2007年6月 4日 11:30

記事末尾にある
Clearfixは本当に必要か　という記事でwuさんとe-luckさんがコメントしています。
http://ms-k.serveblog.net/archives/167-clearfix.html

読む限り、どちらでもいいようですが、NN7.1のバグで引っかかるようです。
qeb 2007年6月 4日 11:39

補足です。
overflow: auto;だと、場合によってスクロールバーエリアが出たことがありました。
個人的には、overflow : hidden;にしています。
p 2007年6月 4日 15:01

NN7.1ではoverflow: hiddenでは内容領域の高さがなくなってしまうバグがあるようです。
Zoorasia 2007年6月16日 03:11

はじめましてZoorasiaと申します。ホップ本愛読者ですっ。さて、clearfixになぜcontentプロパティにピリオドとかが必要なのかが、分かり凄く参考になりました。 サンプルに関しては自分が持っているブラウザではレイアウト崩れが再現できず、一体どのバージョンのブラウザで崩れるのかが気になるところです。
自分が初めて見たclearfixはline-height とかfont-size とかも入っており、記述が多すぎて どんだけーっ！？て感じでした。
今後clearfixを使用するときは、やはりcontentプロパティに何かしら記述したりするほうが安全ですね。
wu 2007年6月16日 15:37

Zoorasiaさん、はじめまして。書き込みありがとうございます。
clearFixはなんだか意味不明な記述ばかりで　ドゥオンダケェ！ですよね。 line-heightやfont-sizeも、もしかしたら私の知らないブラウザに対する処置なのかもしれません。
MacIE5とWinIE6が「無視してok!」という時代になればclearFixもドゥオンダケ簡単になることか、辛抱辛抱 >,
kz 2007年6月25日 17:37

Firefox 1.0～1.5まで、マイナーバージョンを含めすべて見てみましたがどれも正常に表示されました！
Zoorasia 2007年6月27日 02:25

試しにVPCに入っていたNN 6.xとかFirefox 0.8とか、普段は検証しないOpera 6.xとかでも見てみたけれど、レイアウト崩れが発生しませんでした。やはり、ものすごく細かい一部のバージョンで発生するんですね...。（この検証、本当に時間がかかったと思います…）
個人的には、content空の省略版 clearfix採用でも良いような気が…（笑
wu Author Profile Page 2008年6月14日 22:04

みなさま、コメントありがとうございます。
noriさんの書かれた記事 「clearfixの決定版を作る」に追記があり、僕の記事の問題と、それを踏まえた決定版を紹介していますので、もう一度紹介元の記事をご確認ください。

overflow: auto;

インラインボックスをfloat

overflow: auto;

浮動ボックスより、回り込む文字の部分の高さが低いと、外枠のブロックから浮動ボックスがはみだしてしまいます。IE6 IE7 は前ページに有るように、はみだしません。

浮動ボックスを含むブロックの高さを確保する方法として clearfix と呼ばれるテクニックがあります。例を示しておきます。そのほかにも clearfix で検索すればいろいろあります。

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

庭で咲いていた鉢植えのバラ（二コール）です。

これは外ブロックの:after 擬似要素で、フロートを含む全てを書き終わった後で、高さが0の文字とか、実体のないヌル文字とかを、ブロック要素の clear: both 指定で、見えないように書き込むことで外ブロックの高さを確保するというものです。 （書いている本人も、なんのこっちゃ？と思ってしまう…）

さて今回使用するのはもっとかんたんな方法で、フロートボックスを含む外ブロックに overflow: auto または overflow: hidden を指定するだけです。

なぜ overflow: auto または overflow: hidden で外ブロックの中に浮動ボックスが入って、高さが確保されるのでしょう。

「CSS2.1の視覚整形モデル詳細」 の 「10.6.6 そのほか雑多な事例」 と 「10.6.7 ブロック整形文脈ルートにおける 'auto' の高さ」から要約すると次のようになります。

ブロック要素は overflow が visible 以外であるとき、その子孫フロートボックスがはみ出しているなら、フロートボックスの辺を含むように高さが広げられる。

これで十分ですよね。IE6 以上 Firefox, Opera, Safari で対応しているようです。

インラインボックスを float させる

インラインボックスをfloat

インラインボックスを float させる

インライン要素 img を左に寄せ、文字を右に回りこませてみます。
ばら

庭で咲いていた鉢植えのバラ（二コール）です。


"http://www.w3.org/TR/html4/loose.dtd">

庭で咲いていた鉢植えのバラ（二コール）です。

一般的な使い方ではこんな感じでしょうか。ブラウザによって開始位置がちがうのを回避するために、フロートボックスの img を先に記述しています。

IE6,IE7 では img の下に余分なスペースができます。これも IE 特有の仕様です。IE8 では改善されています。(2009/3/26)

俗に言う clearfix と言われるコードのバリエーション色々

俗に言う clearfix と言われるコードのバリエーション色々 - lucky bag

俗に言う clearfix と言われるコードのバリエーション色々

clearfix ネタに乗っかってみる。

* スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る －モダンブラウザ編－
* clearfixはちゃんと考えられてた

.clearfix:after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}
.clearfix {
_height: 1px;
min-height: 1px;
/*￥*//*/
height: auto;
overflow: hidden;
/**/
}

ホップ本でもうーたんが解説してるんだけど、構造に手を加えずに float を clear させるためのいわゆる clearfix ってやつ。結構色々なサイトで紹介されているのを目にすると思うけど、最初の content 生成して clear させる部分の規則集合はほぼ一緒だったりする。だけど、その後（上記コードの強調部分）ってのは結構色々とバリエーションがあったりするんで、自分が知っているパターンをいくつか紹介してみる。

それぞれの説明やどれが良いとかは省略。そのコードを説明しているサイトにリンクしておくんで、興味があるようでしたらそちらを参照してください。ちなみにリンクしたそのサイトがそのコードの orgin ではないかもしれません。以下の全てのコードは :after 擬似要素使って content 生成する規則集合部分は省略（つまり、上記コードの強調部分のみという事です）。あと、あくまで便宜上セレクタを .clearfix としているけど、使う場合は対象セレクタに適宜置き換えて適用させるのが吉。
xmlns 属性を使ったパターン

属性セレクタを使って IE6 以下に display:block 読み込ませないようにしている。

* CSS clearfix

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}

IE7 向けハックを使ったパターン

*:first-child+html が IE7 しか読み込まないことを利用している

* ClearFix - CSS - Snipplr


/* WinIE7 only */
*:first-child+html .clearfix{
height:1%;
}

/* WinIE6 and below */
/*\*/
* html .clearfix{
height:1%;
}
/**/

/* MacIE only */
/*\*//*/
.clearfix{
display:inline-table;
}
/**/

inline-table を使ったパターン

inline-table の指定はマック IE 向け。ひとつ前のやつは inline-table をマックにのみ読み込ませているけど、こっちは逆で最初に inline-table の指定を読み込ませて、その後にマック以外に block としている。

* IE7 display fix | drupal.org

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

zoom を使ったパターン

ちょっと番外っぽいけど、IE 向けに zoom プロパティを利用する。valid じゃなくなるんで、それが嫌ならコンディショナルコメントとかで別にリンクした方が良いかもしれない。

* Clearing floats without structural markup in IE7 | And all that Malarkey

.clearfix {
zoom: 1
}

いくつか書き出してみて気づいたけど、結構きりがない。とりあえずここまで。

[Safari]Clearfixで下スペースが出てしまう問題

[Safari]Clearfixで下スペースが出てしまう問題 [css,hack,safari,tips] - BlurBlue-Note

[Safari]Clearfixで下スペースが出てしまう問題

以前、[CSS][コピペ]clearfixでコピペ用に最新版のclearfixを紹介していましたが、今回Safariで問題があることが発覚したので、修正版をPostしておきます。

CSSPlain Text

1. .hoge:after {
2. display: block;
3. clear: both;
4. height: 0;
5. visibility: hidden;
6. content: ".";
7. line-height: 0;
8. }
9. .hoge {
10. display: inline-table;
11. min-height: 1%;
12. }
13. /* for macIE \*/
14. * html .hoge {
15. height: 1%;
16. }
17. .hoge {
18. display: block;
19. }
20. /* end of for macIE */

どこが変わったかというと、モダンブラウザ用に書かれている、.hoge:afterの部分に
line-height: 0;
が入りました。
今までのものだとclearfixをかけたblock要素の下にマージンが出てしまう問題があったのですが、line-heightを0にすることで解決できました。

多分これでしばらくは問題出ないはず…です。