[css]
.clearfix:after {
content: "."; /* 新しい要素を作る */
display: block; /* ブロックレベル要素に */
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
min-height: 1px; /* IE6,7対策 :afterが使えない*/
}
* html .clearfix {
height: 1px;
/*¥*//*/
height: auto;
overflow: hidden;
/**/
}
[/css]
「.」は他の文字でもかまいません。clearはブロックレベル要素にあてることになっているので，display: block;とします。height: 0;とvisibility: hidden; で高さのない表示されない要素にします。
IE6,7は疑似要素 :after をサポートしていません。そこで，「要素の幅か高さを指定した場合，floatした子要素の高さも含めて算出する」というIEのバグを使って，枠や背景が途中で切れる問題を解決します。