CSS:スマートなfloat解除テクニック「clearfix(クリアーフィックス)」の紹介と使用例

CSS:スマートな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はつきません。

この記事は役に立ちましたか? 役立った 役立たなかった
0 人中 0 人がこの記事は役に立ったと言っています。

★レクタングルWset