2012/03/16

Tag :

floatで段組みした要素の高さが無視される件

CSSで段組み作成する場合の基本の基本、「float」についてメモる。
調べれば星の数ほどでてくることなので、説明は特に無しでいきます。
例えば、

<div class="parent-div">
    <div class="child-div"></div>
    <div class="child-div"></div>
</div>
.parent-div{
    clear: both;
    }
    .child-div{
        float: left;
        }

の場合、child-divクラスの高さが、parent-divクラスに計算されませんので、ほぼ高さのないdivになってしまいます。こういう場合、CSSハックなどで対処できます。
親要素のdivに以下のクラスを追加し、

<div class="parent-div clearfix">
    <div class="child-div"></div>
    <div class="child-div"></div>
</div>
.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix{
    display:inline-block;
    min-height:1%/* for IE 7*/
}

こうすることで、子の高さを計算して親要素に反映してくれます。

ついでですが、CSSハックで対処するのが定石だと思っておりましたが、最近、overflowでも対処できることに気づきましたので一応書いておきます。

<div class="parent-div">
    <div class="child-div"></div>
    <div class="child-div"></div>
</div>
.parent-div{
    clear: both;
    _zoom: 1
    overflow: hidden;
    }
    .child-div{
        float: left;
        }

_zoomとoverflowの指定をすることで、同じ処理ができるようです。

Leave a Reply