Firefox、Safariでdivの背景が正しく表示されない現象の回避法

FirefoxやSafariで、
『親要素に背景画像や背景色を指定して子要素でfloatが行われている場合
親要素の背景画像や背景色はfloatが行われない子要素までにしか反映されない』
という挙動の回避法です。

普通は親要素の次の要素に
'clear:both'を入れててfloatを解除すればいいのですが、
次の要素に'clear:both'を入れる為の要素が何も存在しない時に起こってしまう現象のようです。

tableにしてしまえばいいのですがそれは無し、
高さ指定での回避もなしでってことでのお話です。

方法としては以下3つがメジャーなようです。

（1）HTMLのdiv要素の閉じタグの手前にfloatをクリアした<br style="clear:both" /> といった要素を挿入する。
問題なく回避できましたがせっかくCSSでやってるならあまり使いたくない方法ですね。

（2）overflow:hiddnをかける。
こちらでも回避できますが、
Netscapeで表示されない、IE6でうまく表示できないことがある、
Firefoxでうまく印刷できないことがあるなどの問題があるようです。

（3）【clearfix】親要素にafter擬似クラスを使用する。

.親要素:after {
content: ".";
display: block;
clear: both;
height: 0;
max-height: 0;
visibility: hidden;
}

属にいうclearfixという手法です。

今回この回避方法を取ったのですが、
問題なく、ソースも変わらずく回避できます。

それぞれの要素として入れるか、.cleafixとしてclassに入れるかという使い方です。

通常だと空要素でもIEは解釈して空白の行を出力しようとしますが、
このように擬似要素afterやcontentなどのIEが解釈しないCSSで記述する事で解決できるようです。

Tweet