floatの親BOXの囲みの件

floatが指定された要素は親BOXの高さとは無関係になる。
親BOXがfloat要素全体を含むように変えるためのCSSハックが
「clearfix」
——————————
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
display: inline-block;
}

/* Hides from IE-mac ¥*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hides from IE-mac ¥*/
——————————
これを「class=”clearfix”」のように指定するのが一般的。
もしくは、xhtml側で組み込まずにCSS側で「.clearfix」の部分を該当クラス名(=親BOXのクラス名)に置き換える


Sponsords Link

コメントを残す