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

user-pic
0

普段あまり意識せず使っていた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はちゃんと考えられていた

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

関連のありそうな記事

トラックバック(0)

トラックバックURL:

コメント(5)

| コメントする

マージン直らないんですが。。。

昨日コメントしました件ですが、解決しました。
ご迷惑をおかけしました。

返信遅くなりました^^
float使うといろいろバグがあって、どれで解決できるか訳わかんなくなる時がありますよね。
解決してよかったです。

はじめまして!floatした要素を囲っているクラスが思い通りにならずに困ってました。
おかげさまで解決しました、ありがとうございました。

yamazonさん。コメントありがとうございます。
少しはお役にたてたようで、よかったです。
この辺の問題は、大変頭を悩ませられますよね;;わたしも苦労してます><
お互いがんばりましょー

コメントする

RSS

楽天おすすめ

Tag Cloud

SEO対策

Sponsor Site

Category

Archives

Amazonおすすめ

Copyright © 2008 Trendspotting All rights reserved.