div要素やli要素に「float:left」などを使って横並びにするというのは、WEBデザインで良く行われることだと思います。
しかし、そこで問題があって、
- 親要素の高さが失われて、背景が途切れる。
- 次の関係ない要素までも回り込んでしまう。
こういう問題を解決する方法を３つ紹介する。
１．「clear:both;」のdiv要素を追加する。
回り込みを行っている要素の最後に、「clear:both;」を付けた空のdiv要素を追加する。
２．親要素に「:after」擬似要素を使う
「:after」擬似要素は、設定した要素の中の最後に疑似要素を追加するものです。
擬似要素として設定するコンテンツは、:after」擬似要素の中の「content」の値として設定します。ここでは何も表示させないので「”.”」など何でもいいです。文字列や画像urlなどを入れることができます。
.clearfix:after {
display:block;
clear:both;
height:0px;
visibility:hidden;
content:”.”;
}
.clearfix {
min-height: 1px; /*IE6、7対策*/
}
* html .clearfix {
height: 1px;
/*¥*//*/ /*MAC IE5.x対策*/
height: auto;
overflow: hidden;
/**/
}
３．親要素に「overflow:hidden」を設定する。
親要素に「overflow:hidden」を設定することでfloatによる回り込みを解除することができます。
