ＣＳＳ：スマートなfloat解除テクニック「clearfix（クリアーフィックス）」の紹介と使用例
ＣＳＳ：スマートなfloat解除テクニック「clearfix（クリアーフィックス）」の紹介と使用例
floatをした指定した子の親要素のさいごでクリアされます！！！
clearfixとは、余分タグを追加することなく、親要素のセレクタに特定のプロパティを追加することで
クリア状態にしてくれる、バグを利用したテクニックです。
※ CSSファイルの下に記述するのが通例
ex. #ex_menuで囲まれたfloatたちの自動clear。
※ 以下すべてがワンセットです。
/*——————————————————————– clearfix[float解除]
——————————————————————–*/
#ex_menu dl:after {
content:".";
display:block;
height:0.1px;
clear:both;
visibility:hidden;
overflow:hidden;
}
#ex_menu dl {
zoom:1;
}
※ 通常、適用したいIDやclassをふやすには
..ex_account_cont01:after,
..ex_account_cont02:after,
#ex_menu dl:after {content:".";
。。。。などという具合に併記します。
※ 解説
#ex_menu dl { zoom:1; }
の部分は、IE6.0以前に適用させる記述です。
こちらには、:afterはつきません。