構造のマークアップなしでフロートをクリアする方法

前回も書きました、フロートをクリアする裏技(笑)、clearfix技ですが、もう一つ紹介しておきます。Tony Aslett氏が考え出した書き方とのこと。これは便利!是非お使い下さい(笑)

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

タグ


便利なclearfix

ボックスをfloatさせた後、回りこみがおかしくなったりmarginが効かなくなったりと、あれこれとややこしいfloatの解除。そこで登場する、便利なcssがこのclearfix。有名なので是非活用されたし。使い方は、clearしたい親要素に下記のCSSを適応するだけ。(クラス名は適当になにか付けて下さい)


.clrfix:after {
  content: ".";
  display: block;
  visibility: hidden;
  height: 1%;
  line-height: 0;
  clear: both;
  margin-bottom:15px;
}

IE7はこれに対応していないので、IE7用に下記を指定。


*:first-child+html .clrfix{
  display: inline-block;
  zoom: 100%;
  margin-bottom:15px;
}

個人的に使い勝手がいいのと思うのは下記のソース。だいたいはこちらのほうで問題ありませんでした。


.entry {
	overflow: hidden;
}

.entry:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}

/*\*/
* html .entry {
    height: 1em;
    overflow: visible;
}
/**/

clearfixは他にも色々な亜種も存在しますので、一番使いやすいものを使用するのがいいカモ。

タグ


2008 年 10 月 1 日 | コメント/トラックバック(0)|

カテゴリー:CSS メモ

このページの先頭へ

イメージ画像