clearfixで下マージン(スペース)が発生してしまう

普段あまり意識せず使っていたclearfixで、適用したボックスの下にマージン(スペース)ができていたことに気づきました。

調べてみると、clearfixにもいろいろな見解や方法があるんですne...
私が使っていたものは、少し古いことも分かりました。

当面、対象としたいブラウザや、どのくらいまでスペースを許すかなどケースバイケースで使い分けていこうかと思います。

私が使っていたものは、少し古いことも分かりました。

当面、対象としたいブラウザや、どのくらいまでスペースを許すかなどケースバイケースで使い分けていこうかと思います。

■ベース

/* Clearfix */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {
    display: inline-block;
    min-height: 1%;
}
/* Hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
/* End hide from IE-Mac */

■少しくらいはスペースできてもいいかって時

/* Clearfix */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    font-size: 0.1em;
    line-height: 0;
}
.clearfix {
    display: inline-block;
    min-height: 1%;
}
/* Hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
/* End hide from IE-Mac */

■Netscapeは無視していいかって時

/* Clearfix */
.clearfix:after {
    content: " "; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {
    display: inline-block;
    min-height: 1%;
}
/* Hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
/* End hide from IE-Mac */

参考にさせていただいたのは
norisfactoryさん　clearfixの決定版を作る－モダンブラウザ編－
3ping.orgさん　clearfixはちゃんと考えられていた

ありがとうございます。スリムなバージョンも試してみたいと思います。