Webサイトを制作していて、親要素に背景色などを指定し、その子要素をfloatさせた時とかにfloatさせた子要素が親要素からはみ出すという現象に遭遇されることは結構あると思います。
これを解決するために空のdivやbrなどにclear:bothをクラス指定してみたり。
それでも見た目上はOKなんですが、作っている本人としてはなんだか精神衛生上あまり良くなかったりするわけです。
これを解決してくれるのがclearfix。知っておくと便利です。
clearfixの設定方法
親要素に対してCSSで以下のように指定します。
[css]
.clearfix:after {
display: block;
content: ".";
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {display:inline-block;}
/*Hides from IE-mac\*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
/*End hide from IE-mac*/
[/css]
:after擬似要素を利用して、親要素の直後にcontentプロパティで仮コンテンツを挿入しclear:bothでfloatをクリアさせています。
いやはや、凄いですね。
コメントを残す