CSSで無理やりfloatをclearする方法

【PR】初心者でも安心なレンタルサーバー。２６３円から使えます。
【PR】HP登録でSEO対策！アクセスアップにコチラ！

MozillaやFirefoxで
『親ボックスに背景画像や背景色を指定して
　子ボックスでfloatが行われている場合
　親ボックスの背景画像や背景色は
　floatが行われない子ボックスまでにしか反映されない』
という挙動があります。

図解するとこんな感じ
csssample1.gif

対応策としては親ボックスの次の要素に
'clear:both'を
適応させてfloatを解除すればいいのですが
'clear:both'を
適応させる為の要素が何も存在しない事があります。

そんな場合
親要素に対して以下のCSSを適応させることで解決します。

div#main:after {
content : "";
display : block;
height : 0;
clear : both;
}

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

関連エントリー


floatした際に背景が消える件(IE編)
floatした際に背景が消える件【css tip】

スポンサードリンク

«伝わるWeb文章デザイン100の鉄則 | メイン | phpPgadminでログインしたユーザーのDBしか閲覧できないようにする。»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/393
コメントを投稿


画像の中に見える文字を入力してください。