フローと解除について

＜div class="clear"＞＜/div＞を
　　↓↓
class="clearfix"だけで、済ます。


親要素の一番下に入れる要素をCSSで生成する
※下記、サイト参考


////// HTML //////

＜div class="clearfix"＞＜/div＞

////// CSS //////

.clearfix:after {
content: ".";(新しい要素をつくる)
display: block;(clearはブロックレベル要素にあてることになっているので)
clear: both;
height: 0;①
visibility: hidden;②
}

(①と②で、高さの表示されない要素に。)


.clearfix {
min-height: 1px;(IE7のためのCSS)←★
}

* html .clearfix {
height: 1px;(IE6のためのCSS)←★
/*\*//*/(MAC IE5ためのCSS)←☆
height: auto;
overflow: hidden;
/**/


★:afterがIE6・7ではサポートされていない。

* htmlをつけるとIE6以前（Mac IE5を含む）でしか効かなくなくなります。（Starハック）
/*¥*//*/と/**/で挟んだ部分はMac IE4,5にしか効きません。


▼解説＆メモ▼

:afterとは、
疑似要素。当該要素の直後を対象とする疑似要素。
(http://www.marguerite.jp/Nihongo/WWW/RefCSS/_after.htmlより)




-----------------------参考サイト---------------------
↓d-spica
http://blog.d-spica.com/entry/070307clearfix.html

--------------------------------------------------------



最新版はこっち→