CSS知識メモ｜floatの弊害をクリアするclearfix

floatで表示が崩れるのを防ぐclearfix処理

floatを使って2つのボックスを並べると、

後続のレイアウトの表示が崩れたままになる。

そのため、floatを使う場合は、

それをグループ化し（例ではclearfixクラスで囲っている）

clearfixの設定を適用する必要がある。

<div class="clearfix">
    <div class="box1">
        BOX1
    </div>
    <div class="box2">
        BOX2
    </div>
</div>

    .clearfix:after {
        content: "";
        display: block;
        clear: both;
    }
    .clearfix{
        /zoom:1;
    }
    .box1 {
        float: left;
        width: 50%
    }
    .box2 {
        float: right;
        width: 50%
    }

/zoom: 1;は、古いIEのためのもので、2016年現在はまず不要。

また、floatを記述する際は、同時にかならずwidthを設定するように癖をつけておくこと。