tochio

もう一度、「clearfix」について考えてみた。

以前、「「clearfix」についてちょっと考えてみた。」という記事を書きましたが、 その時は、「「clearfix」はどこでどんなことををしているのか」についてのみ触れましたので、 今回はclearfixのバリエーションについてです。

■おさらい:初めて「clearfix」というclass名が使われたもの(2004/5/14)

.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 */

懐かしのIE5やNetscape等にも対応しているので、かなり冗長な印象です。

■micro clearfix

2011年の4月に登場したのが「micro clearfix」です。 モダンブラウザのほか、「:after」に対応していないIE6・IE7でも使用できるよう、 「zoom: 1;」を入れてhasLayoutを有効にしています。

/* For modern browsers */
.cf:before,
.cf:after {
 content: " ";
 display: table;
}

.cf:after {
 clear: both;
}

/* For IE 6/7 only */
.cf {
 *zoom: 1;
}

■さらにコンパクトなclearfix

IE6・IE7のシェアが下がり、ターゲットブラウザから外れることが増えてくると、 それらのブラウザを考慮しない、micro clearfixよりもさらにコンパクトなclearfixの記述も 増えてきました。

.clearfix:after {
    content: "";
  clear: both;
    display: block;
}

IE6・IE7を考慮しない=hasLayoutを有効にする必要がなくなったので、 「zoom: 1;」の記述がなくなりました。 もしIE6・IE7がターゲットブラウザに入っているのであれば、 hasLayoutを有効にしておかなければならないので、 このようなシンプルな記述は避けなければなりません。

■htmlに「class="clearfix"」を記述しないclearfix

floatする要素の親要素になることが多いdivやulに対して、 css内部であらかじめclearfixを設定してしまう、という方法です。

div:after,
ul:after {
   content: "";
  display: block;
 clear: both;
}

「divとulの直後でfloatを解除」と「divとulにclass="clearfix"を記述してfloatを解除」は 同じ意味を持つので、html上で親要素に「class="clearfix"」と記述しなくても、 floatが解除されます。 疑似要素「:after」は、IE6・IE7では未対応でしたが、それらがターゲットブラウザに入ることが ほぼなくなったため、最近はこういった方法をとることが多いように思います。 この方法だと、clearfixを入れるのを忘れることもなくなるので、安心安全でもありますね。

■番外編(?):overflow: hidden;でclearfix

親要素のoverflowプロパティの値にvisible以外のものを指定すると、 親要素は、floatされた子要素の高さを認識するようになるため、 「class="clearfix"」を使った時と同じ効果が得られます。 overflowプロパティに入れる値をautoやscrollにしても同じですが、 ブラウザによってはスクロールバーが出てしまうなどの現象が起こるため、 「overflow: hidden;」を入れるのが一般的なようです。

#wrap {
   overflow: hidden;
   zoom: 1;
}
.contents {
    float: right;
}
.menu {
   float: left;
}

overflowプロパティが効かないIE6・IE7に対応するために、 親要素に「overflow: hidden;」とともに「zoom: 1;」を入れて hasLayoutを有効にしています。 最近はあまり見かけない方法ではないかと思います。

clearfixは、ブラウザのシェアが変わるにつれて、不要な記述を削除することで、 よりシンプルなものへと変化してきています。 3年後、5年後には、まったく違った形のclearfixが登場しているのかもしれません。

【参考サイト】

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら