[PR] 容量300MB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。さくらのレンタルサーバ。
フロートではみ出した子要素をクリアするには？
子要素にＣＳＳでフロートを設定すると、親要素はその子要素の高さを無視する形で表示されます。以下のサンプルでは、段落にフロートをかけ、親要素にボーダーを設定しています。
＜失敗例サンプル＞
フロートを設定した子要素フロートを設定した子要素フロートを設定した子要素フロートを設定した子要素
フロートなし子要素
親要素に横幅なし
IEでは親要素に横幅を設定して解決できるが…
IEでは、親要素に横幅を設定することで、フロートをかけた子要素の高さを認識してくれますが、FirefoxやOpera等のモダンブラウザでは依然として上記の失敗例サンプルと同じ結果になってしまいます。
フロートを設定した子要素フロートを設定した子要素フロートを設定した子要素フロートを設定した子要素
フロートなし子要素
親要素に横幅あり
ＨＴＭＬタグを追加してクリアする方法
これらの問題を解決する方法として、親要素の終了タグの直前に、空のDIVタグやBRタグを追加して、そこにＣＳＳのクリアプロパティを設定する方法があります。なお、この方法をIEで見た場合、親要素の枠線に一部表示されない部分が生じることがあるようです。
フロートを設定した子要素フロートを設定した子要素フロートを設定した子要素フロートを設定した子要素
フロートなし子要素
親要素に横幅なし
擬似要素AFTERを活用してクリアする方法
余計なタグを追加することなく、ＣＳＳのみで子要素のフロートをうまくクリアする方法があります。俗に「clearfix」と呼ばれている方法で、擬似要素AFTERを利用し、親要素に対して、ドットをブロックレベル要素に変換してクリアを設定し、高さゼロで非表示に設定します。
完成例サンプル
フロートを設定した子要素フロートを設定した子要素フロートを設定した子要素フロートを設定した子要素
フロートなし子要素
親要素に横幅あり
擬似要素AFTER使用
スタイルシートサンプル
div.parentt03:after {
content:".";
height:0px;
clear:both;
display: block;
visibility:hidden;
}
この擬似要素AFTERと横幅を親要素に設定しておくことで、IEでもその他のモダンブラウザでも、親要素に子要素の高さを認識させる形で表示させることが可能となります。
