clearfixが効かない場合

リストなどをfloatさせ、その親要素に背景やボーダーを設定してると、親用要素の枠から子要素が飛び出して表示される場合がある。

一般的な解決方法としてclearfixを指定するが、今回、clearfixを指定しても解決しなかった。
(IEはOKだったが、MacのFirefoxではみ出す。厳密にはIEの解釈が間違ってる。)

他の方法を調べてみたところ、以下の解決方法でもclearfixと同じ効果があり、適用してみたところ解決した。

【サンプル】
clearfixを指定しても親要素のボーダーからリストの文字がはみ出す。
(下記コードは単純にしてるが、実際には他にもCSSが絡んでいるため、根本的なエラーの原因は解ってない。)

< div style=”border:1px solid #CCC” class=”clearfix”>
< ul>
< li style=” float:left”li><a >リスト</a></li>
< li style=” float:left”li><a >リスト</a></li>
< li style=” float:left”li><a >リスト</a></li>
< /ul>
< /div>

【解決方法】
親要素に「overflow」と「height(またはwidth)」を指定する。

overflow:hidden;
height:100%;

とりあえず上記の方法で解決したので、もしclearfixでも解決しない場合は試してみて。

<追記>
上記の方法でも解決しないケースがありました。
親要素にposition:absoluteがかかっている場合。
まだ解決方法わからず。

コーディングに関する記事

コメント

  1. aiko より:

    はじめまして、こんにちは。
    clearfixの今時の書き方を検索していて、通りがかったものです^^

    absoluteはちょっとやっかいなことがあるけど、
    たしかに使いたいときもありますね。

    は親要素かと言われると自信がありませんが、
    やりたいことの下記でも意味合い同じかなと思います。
    いかがでしょうか。。。

    リスト
    リスト
    リスト

    ちなみに、手元で確認したときのclearfixは↓を使いました。

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

    /* for IE */
    .clearfix{
    *display: inline-block;
    zoom: 1;
    }

  2. admin より:

    aikoさん

    せっかくコメントいただいたのに、中途半端にHTMLタグが効いてしまっていて申し訳ありません。

    ご紹介いただいた方法でも実現できそうですね。
    厳密にマークアップの必要がない場合なら有効だと思います。

    ありがとうございました。