Webサイトを作るうえでclearfixを知っておかないとけっこう困ったりすると思うので是非この機会に知って下さい。
どんな時にこのclearfixを使うかと言うと、floatさせている画像やボックスなどの子要素。その子要素を包んでいるはずの親要素が子要素を包んでくれないケースって経験した事があると思います。
これを解決する為にclear:bothをbrなりdivにクラス指定した事ってあると思うんですけど、それを解決をしてくれるのがclearfixなんです。
※IEの場合はheightを指定する事で解決できますが、コレはバグなんで他のモダンブラウザでは解決できません。
clearfixの使い方
下記のソースをclearしたい親要素に記入。
div:after {
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
IE7はコレに対応していないので、IE7用に
div {
display: inline-block;
}
上記の用にclearfixとは:after擬似要素を利用してclearしているんですよね。
初めて知った時は凄いと思いましたよ。
まだ知らない方は今後は使って下さい。
