クリアフィックスの書き方はいろいろあります。

フロートの解除は、親要素が子要素のフロートによって高さが潰れる問題を解決するために用いられます。フロートを解除する一般的な方法を以下に示します。

カラのclear-fix要素

   .clearfix::after {

content: “”;

display: table;

clear: both;

}

親要素に.clearfixクラスを追加します

2. オーバーフロープロパティを使用する。

   .parent {

overflow: auto;

}

ブロックフォーマットコンテキスト (BFC) が発生して、自動的にフロートをクリアします。

clearfixクラスセレクタを使用する

   .clearfix:before,

.clearfix:after {

content: “”;

display: table;

}

.clearfix:after {

clear: both;

}

.clearfix {

zoom: 1; /* 兼容IE */

}

親要素に.clearfixクラスを追加してください。

これらの中で、1つ目と3つ目は擬似要素で空要素を挿入し、clear: bothでそれをフロート要素の後に配置してフロートをクリアしています。2つ目はoverflowプロパティを利用してフロート要素をラップする新しいブロックレベルのフォーマットコンテキストを作成し、フロートを自動的にクリアしています。ケースによっていずれかの方法を選択してください