CSSデザインノートでタグ「clearfix」が付けられているもの

マルチカラム構造にしたときなど、ブロック要素の回り込みを解除するのに、Clearfixと呼ばれるテクニックを使用するのが便利です。ブラウザの移り変わりにより、動作対象とする古いブラウザを考慮しなくなってもよくなってきたこの頃ですので、Clearfixのソースコードも以下のようにここまでスリムになりました。

CSSコード

element{
   ⁄zoom:1;
}

element:after {
   content:'';
   display:block;
   clear:both;
}

これはNetScapeとMacのIEを考慮していないソースコードになります。「/zoom:1;」のようにプロパティの前にスラッシュをつけるとIE6と7だけに適用されるようです。今まで知りませんでした。

このclearfixを使う他に、単純に回り込みを解除させたい要素に「overflow:hidden」を適用すればよいというのもあります。印刷時に問題があるらしいのですが、印刷用のCSSを用意する場合は「overflow:auto;」などとしておけばよいので、結構使える技ではあります。

参考

例えば、リストで作成したメニューをfloatで横並びにした場合、親要素(ここではul)の内容が表示されません。ulの内容物が表示されないと、背景やborderが表示されなかったり、marginが効かなかったりして不便です。

その解決方法としては以下の4つがあります。

  1. 親要素にもfloatを指定する
  2. 親要素にoverflowを指定する
  3. 親要素に高さを指定する
  4. 親要素にclearfixを指定する

1.親要素にもfloatを指定する

親要素に「float:left;」を指定することで、親要素の高さが算出され、内容物が表示されます。ただし、floatした次の要素は回り込まれたままなので、解除するには「clear:both;」を次の要素に指定する必要があります。

2.親要素にoverflowを指定する

親要素に「overflow:hidden;」を指定することにより、高さが算出されます。回り込みは解除されています。IE6は「zoom:1;」を同時に指定しないと高さが算出されないので注意です。

3.親要素に高さを指定する

親要素の高さが固定の場合は、heightで高さを指定するとよいです。この場合、次の要素は回り込みは解除されていないのですが、指定した高さが内容物より大きければ、次の要素は下段に表示されます。

4.親要素にclearfixを指定する

clearfixというハックを使用することで、親要素の高さが算出されます。比較的古いブラウザにも対応しているので便利です。clearfixは次の要素の回り込みを解除します。

CSSコード

/* モダンブラウザ(Firefox Opera Safari)対策 */
.clearfix:after{
   content:".";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
   font-size:0;
}

/* Win版IE7とMac版IE5対策 */
.clearfix{
   display:inline-block;
}

/* Win版IE5および6対策 */
/* Hides from IE-mac \*/
* html .clearfix{
   height:1px;
}

.clearfix{
   display:block;
}
/* End hide from IE-mac */

各方法で若干、余白や表示領域に差が出ますので、CSSで調節してください。

floatを使用してボックスやリストを横並びにした時、次のコンテンツも続いて横並びになってしまうので、回り込みを解除しなければなりません。

また、floatした親要素の内容が0になってしまい、親要素に背景やborderを適用しようとしても表示できません。

これを簡単に解決する方法がいくつかあります。

  1. 次のコンテンツに「clear」を指定する
  2. 親要素に「clearfix」を使用する
  3. 親要素に「overflow」を指定する

まず、サンプルとして共通の(X)HTMLコードを示します。

(X)HTMLコード

<div id="menu">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
<li>メニュー5</li>
</div>
<div id="contents">
・・・
</div>
</ul>

1.次のコンテンツに「clear」を指定する

回り込みを解除したい要素に「clear:both;」を指定します。

CSSコード

div#contents {
   clear:both;
}

2.親要素にclearfixを使用する

floatの親要素の高さを算出するメジャーな方法に「clearfix」と呼ばれるテクニックがあります。これを考えた人はすごいです。

CSSコード

div#menu {
   margin:0;
   padding:0;
}

div#menu li {
   float:left;
   list-style:none;
}

/* モダンブラウザ(Firefox Opera Safari)対策 */
div#menu :after{
   content:".";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
   font-size:0;
}

/* Win版IE7とMac版IE5対策 */
div#menu {
   display:inline-block;
}

/* Win版IE5および6対策 */
/* Hides from IE-mac \*/
* html div#menu {
   height:1px;
}

div#menu {
   display:block;
}
/* End hide from IE-mac */

3.親要素にoverflowを指定する

overflowを親要素に指定することにより、高さが算出されます。値はauto、hidden、scrollのいずれかを使用します。

CSSコード

div#menu {
overflow:hidden;
}

確認はしていないのですが、「overflow:hidden;」を使用した場合、ブラウザのバージョン(特に古いバージョン)によっては正常に動作しなかったり、印刷時に問題があったりすることもあるようです。

参考サイト

そのほかにもいろいろとfloatを解除する方法があるようです。

最近のブログ記事