擬似要素を使ってfloatを解除する

子要素にfloatかけてると、親要素の高さが潰れてしまうことがある。
たいていその原因は、cssでclear: bothしていないから。

下記のようなコードを書けば、親要素に自然な高さを持たせることができる。

<div class="parent">
  <div class="child">あああ</div>
  <div class="child">いいい</div>
</div>

.child {
    float: left;
}

.parent {
    zoom: 1; /* float解除 for IE6/7  */
}
.parent:after, .parent:before {
    content: "";
    clear: both;
    display: block;
}

• :beforeは、parentクラスの真上に当たる部分を指す
• :afterは、parentクラスの真下に当たる部分を指す
• clear: both：浮いた状態を地に足付けさせる
• display: block：ブロック要素に変換しないとうまくいかない