【CSS】floatを解除するclearfixの方法のまとめ

floatを解除するのに一番知識がなくても簡単にできる方法は空のdiv要素にclearプロパティを指定して解除する方法ですが、空のdiv要素を作ってしまうのは文書構造的に正しくありません。そのために利用されるのがclearfixという方法ですね。

今回はclearfixの方法についてまとめます。

1 clearfixとは？
2 clearfixの実装方法
3 micro clearfix
4 css内部であらかじめclearfixを設定してしまう方法
5 overflowプロパティにhiddenキーワードを指定する方法
6 あとがき

clearfixとは？

「clearfix」とはclearプロパティを使わずにfloatを解除する方法であり、擬似要素「after」を使ってfloatをかけている要素の後ろに擬似的な要素を作り、それに対してclearプロパティを適用させる方法です。

clearfixの実装方法

<ul>
    <li class="menu_list">フロートさせるリスト</li>
    <li class="menu_list">フロートさせるリスト</li>
    <li class="menu_list">フロートさせるリスト</li>
    <li class="menu_list">フロートさせるリスト</li>
</ul>

ul li .menu_list {
    float: left;
}

上記のようなhtml,cssコードの場合だとul要素が高さ０扱いの浮いた要素となっており、li要素の後の記述でclearプロパティを適用してfloatを解除しなければいけません。そのため、以下のようなclearfixと呼ばれる実装を行います。

<ul class="clearfix">
    <li class="menu_list">フロートさせるリスト</li>
    <li class="menu_list">フロートさせるリスト</li>
    <li class="menu_list">フロートさせるリスト</li>
    <li class="menu_list">フロートさせるリスト</li>
</ul>

ul .clearfix:after{
    content:"";
    display:block;
    clear:both;
}

ul li .menu_list {
    float: left;
}

擬似要素を使う際にはcontentプロパティは必須となるため、中身は空でいいので記述しておきます。また、擬似要素はデフォルトでインライン要素になっているので、ブロック要素にし、clearを指定して完了となります。

ただし、上記のシンプルな方法では「IE6」「IE7」では表示が異なってしまうために対応するためには別の記述が必要にはなりますが、「IE7」「IE8」でも2014年8月時点でマイクロソフトのサポート対象から外されており、現在でも「IE6」「IE7」を使っているユーザはごくわずかですね。

「IE6」「IE7」にも対応しているclearfixを以下で紹介します。

micro clearfix

「micro clearfix」は2011年の4月に登場しました。モダンブラウザのほかに、擬似要素に対応していない「IE6」「IE7」でも使用できるように「zoom: 1;」を入れてhasLayoutを有効にしています。

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
 
.cf:after {
    clear:both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

css内部であらかじめclearfixを設定してしまう方法

div要素やul要素はfloatする要素の親要素になることが多いため、あらかじめcss側で共通設定として指定しておくという方法です。floatの解除忘れ(clearfixの入れ忘れ)の防止になる楽な方法ですね。

div:after,
ul:after {
    content: "";
    display: block;
    clear: both;
}

overflowプロパティにhiddenキーワードを指定する方法

clearfix以外にもfloatを解除する方法があります。

overflowプロパティでvisibleキーワード以外を指定すると、新しいブロックの書式コンテキストを確立することでき、float要素の指定された高さも認識してくれるようになり、親のボックスの高さが算出されるようになります。

なお、IE6/7ではoverflowプロパティに対応していないため、「zoom: 1;」を入れてhasLayoutを有効にしています。

ul {
    overflow: hidden;
    zoom: 1;
}

ul li {
    float: left;
}

あとがき

CSS3ではfloat要素に代わるレイアウトとしてFlexbox(フレキシブルボックスレイアウトモジュール)もありますね。この辺りも自分もよく勉強してまとめようと思います。

Pocket