3分コーディング」のコーナーです。以前、floatで崩れた?コレでなおせ!という記事でfloatによるレイアウト崩れの対処方法をご紹介しました。そこでは、overflowプロパティを使った方法を取り上げましたが、clearfixはさらっとスルーしたので、改めて見てみたいと思います。clearfixとはまずclearfixとはテクニックにつけられたただの通称であって、そのようなセレクターやプロパティがあるわけではありません。clearfixはfloatによって親要素の高さが足りなくなる、またはなくなってしまったときに、高さを元に戻すために使います。clearfixの意味clearfixのコード自体は検索すればいくらでもでてきます。バリエーションも様々ですが、今回はスタンダードと思われるものを取り上げて、そのコードの意味を解説します。1%;}ポイントはafterに対応したブラウザ向けの部分です。after疑似要素はIE8以上、firefoxやsafari、chrome等の標準仕様に準拠したブラウザーで使えます。afterとcontentプロパティを使って「高さが足りない/なくなっている要素の直後に文字(ピリオド)を追加」します。その文字をdisplayプロパティでブロックレベル要素の様に表示します。そこでclearをするという寸法です。clearできる要素がないなら追加してしまうという考えなのですが、HTMLのソースコードを汚さずに解決できます。この例では汎用性をもたせるために.clearfixというクラスセレクターで適用していますが、たとえば#contents:afterというようなピンポイントな書き方もできます。これだけではafterが使えないIE6や7では解決できません。そこで、IE6と7向けにはハックが必要になります。ハックの内容は正直おまじない的なものですが...IEのバグを使った裏技です。IEを考慮したものもありますが、シェアとしてはもう無視してもよいのではないかと思います。[必須入力]※画像の中の文字を半角で入力してください。研修トレーニングサービス、およびレンタル教室・会議室です。(7)RSSフィードを取得Seesaaブログ。