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がかかっている場合。
まだ解決方法わからず。
2 thoughts on “clearfixが効かない場合”
はじめまして、こんにちは。
clearfixの今時の書き方を検索していて、通りがかったものです＾＾
absoluteはちょっとやっかいなことがあるけど、
たしかに使いたいときもありますね。
は親要素かと言われると自信がありませんが、
やりたいことの下記でも意味合い同じかなと思います。
いかがでしょうか。。。
リスト
リスト
リスト
ちなみに、手元で確認したときのclearfixは↓を使いました。
.clearfix:after {
content: “.”;
display:block;
height: 0;
clear: both;
visibility: hidden;
}
/* for IE */
.clearfix{
*display: inline-block;
zoom: 1;
}
aikoさん
せっかくコメントいただいたのに、中途半端にHTMLタグが効いてしまっていて申し訳ありません。
ご紹介いただいた方法でも実現できそうですね。
厳密にマークアップの必要がない場合なら有効だと思います。
ありがとうございました。