clearfixの使い方

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しているんですよね。

初めて知った時は凄いと思いましたよ。

まだ知らない方は今後は使って下さい。

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article