clearfixとは

■clearfixとは

●float と　親要素の関係

・親要素の中のfloatさせた要素の量が多いと通常は回り込みをして、
　親要素の高さはキープできるが
　
→floatした要素の量が、極端に少ないと
　親要素の高さから無視されてしまい、量が多くて下にあふれてしまう。
　
　◎なので全体の高さがキープされない。

　私はこれのおかげで、親要素に指定した背景画像とその周りのボーダーが
　下まで、表示されず、かっこ悪い有様になりました。（泣）


　★つまり、floatによって右または左に配置された要素は、
　親要素の高さから無視されるわけです。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

★そこで、clearを使うわけですがclearを使うには、要素が必要です。

　clearfixがでてくる以前は、無駄な空要素を作りfloatを解除していました。
　しかし見た目だけに使い、文字列に意味がなくあまりよい方法ではありません。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

・親ボックスが要素全体を含むように変えるためのCSSハックのことが
　clearfixなのです。

・親ボックスが全体を覆うようにするとfloatした要素は
　親ボックスからはみでません。

１．after擬似要素とcontentプロパテイを利用して、中のfloatした要素の後ろに
　インラインボックスを生成。
２．display:block;で親要素の幅に広がるブロック要素に変換。
３．clearプロパテイで、フロート解除。
　という３つで構成されています。
　　
　また、visibility: hidden;で、不要な.（.は追加した本来不要なテキスト）を
　表示させていません。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

●clearfix


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


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

● clearfix　使い方

★classやidの属性の値をclearfixのセレクタ部分に指定する。

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


・こんな感じに.clearfixの部分を　.wrapper に変更してみました。
　４ケ所変更しました。

★親ボックスに既に指定されているクラス名で置き換えて使用します。


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

●clearfixはIE5、IE6、mac版IEに対応しておりません。

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}←WIN IE6以前対策 ホーリーハック

.clearfix {display: inline-block;}← IE7とmac版IE5対策。

.clearfix {display: block;}←mac版　IE5以外向けの指定。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

◎追加　入れ子にしていくと　clearfixが増えてコードが肥大しますよね。
そういう時はグループセレクタを使い、カンマ区切りでやるとコードがすっきりします。

（例）　

div#contents:after,
div#footer:after,
content: ".";
（以下、省略・・）

[ふらっと]

駆け出しのものです。
clearfixの意味が分かりました！
ありがとうございます^^