clearfixについて

2010/10/04 11:44

このQ&Aのポイント

.clearfix:afterとcontentを使ったclearのやり方自体は分かるのですが、IEのバグ直し用のmin-height: 1px;というところがなぜ必要なのか意味がよく分かりません。
clearfixの:afterとcontentを使ったclearのやり方はよく知られていますが、min-height: 1px;はIEのバグを修正するために必要です。
clearfixには.clearfix:afterとcontentを使ったclearの方法がありますが、その後にmin-height: 1px;を指定することで、IEのバグを解消することができます。

yasu_0_0
お礼率43% (29/66)

HTML
回答数1
ありがとう数3

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

x_lady007
ベストアンサー率75% (37/49)

2010/10/04 17:33 回答No.1

これを理解するにはIE6・7のバグを理解する必要があります。具体的には、以下の条件がそろった時に・・・ 1. 内包する要素に対しfloatが指定されている、 2. 親要素に対しheightが指定されている(IE6のみ) 3. 親要素に対しmin-heightが指定されている(IE7のみ) 本来であれば、親要素の高さは子要素の高さを除いた数値のはずですが、IE6・7では子要素の高さを含んでしまいます。 clearfixはこのバグを意図的に利用しています。(ご掲示頂いた記述はpxでしたが、バグを出現させるにはemでも%でも何でもいいです。) 文章では分かりずらいかもしれませんので、以下のソースをコピペしてIE6・7で確かめてみてください。 ----------------------------- <!DOCTYPE html> <html> <head><meta charset="Shift_JIS"></head> <style> .clearfix:after{content:'.';display:block;clear:both;height:0;visibility:hidden;} </style> <body> ■height:1px;を指定した場合 <div class="clearfix" style="border:2px solid #000;min-height:1em;_height:1em;"> <div style="border:2px solid #000;width:100px;height:50px;float:left;">あああ</div> <div style="border:2px solid #000;width:100px;height:50px;float:left;">あああ</div> <div style="border:2px solid #000;width:100px;height:50px;float:left;">あああ</div> </div> ■height:1px;を指定しない場合 <div class="clearfix" style="border:2px solid #000;"> <div style="border:2px solid #000;width:100px;height:50px;float:left;">あああ</div> <div style="border:2px solid #000;width:100px;height:50px;float:left;">あああ</div> <div style="border:2px solid #000;width:100px;height:50px;float:left;">あああ</div> </div> </body> </html> ----------------------------- また、ご掲示頂いたものにはMac IE用の記述も入っていましたが、個人的にはもう必要ないんじゃないかなと思います。 ----------------------------- .clearfix:after{content:".";display:block;clear:both;height:0;visibility:hidden;} .clearfix{min-height:1px;} *html .clearfix{height:1px;} ----------------------------- 余談ですが、、私はclearfixではなくシンプルな以下を使用しています。 ----------------------------- .clearfix{overflow:hidden;zoom:1;} -----------------------------

質問者