clearfixとは何？
みなさんはHTML・CSSを使ってて、floatで横並びのレイアウトを作成している際に「clearfix（クリアフィックス）」を使っていますでしょうか？
clearfixを理解するためにflaotを使って横並びレイアウトを実現している例を見てみましょう。
下記例ではメインのコンテンツ（左・右）、フッターを並べている例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.main {
background-color: green;
}
.left {
background-color: blue;
width: calc(50% - 20px);
height: 100px;
float: left;
margin: 10px;
}
.right {
background-color: red;
width: calc(50% - 20px);
height: 100px;
float: left;
margin: 10px;
}
.footer {
background-color: orange;
height: 50px;
}
</style>
</head>
<body>
<div class="main">
<div class="left">
左
</div>
<div class="right">
右
</div>
</div>
<div class="footer">
</div>
</body>
</html>
ここで注目してほしいのは、結果でオレンジのフッターが一番上に表示されていて、赤・青の要素と重なっている点です。
floatを使うとコンテンツが浮く
CSSのfloatは「浮く」という意味です。「浮く」とは要素がこれまでぎゅうぎゅうづめされていて、積み木のように配置されていた盤面から浮くイメージです。
先程の例では左・右が浮いていますので、その隙間に下にあるフッターが入って重なったために、フッターが見えていない状態になっていたのです。
このように左・右とfloatをつけた要素が浮いて高さがとれなくなったために、それらを囲っているmainの高さも算出されずこのような現象が起きています。
clearfixを使う
ではclearfixを使って先程の問題を対処してみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.main {
background-color: green;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.left {
background-color: blue;
width: calc(50% - 20px);
height: 100px;
float: left;
margin: 10px;
}
.right {
background-color: red;
width: calc(50% - 20px);
height: 100px;
float: left;
margin: 10px;
}
.footer {
background-color: orange;
height: 50px;
}
</style>
</head>
<body>
<div class="main clearfix">
<div class="left">
左
</div>
<div class="right">
右
</div>
</div>
<div class="footer">
</div>
</body>
</html>いかがでしょうか。こちらの例ではしっかりと左・右の高さが算出されていて、今まで表示されていなかった緑の領域が出来て、その分フッターが下部に配置されています。
追加したclearfixのCSSは下記の通りです。
.clearfix:after {
content: "";
display: block;
clear: both;
}
- 「:after」ですので、clearfixクラスの後に適用
- 「content: ""」で空の文字列を挿入
- 「display: block」でblock要素に変更
- 「clear:both」でfloatを解除。
要するにclearfixというクラスをつけて、続く要素のために、flaotを解除しているのです。
clearfixの使い方
clearfixは上記の例で見たように、floatで横並びした要素の親要素に対してclearfixを適用する使い方をします。
clearfixというクラス名（クラス名は任意）を作成し、それのafterの擬似要素に対して「clear: both」を含む下記のスタイルを適用します。
.clearfix:after {
content: "";
display: block;
clear: both;
}
下記はclearfixを使った3カラムの横並びの例です。各カラムの高さがちゃんと算出されて、オレンジのフッターがその下部に来ていますよね。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.main {
background-color: green;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.left {
background-color: blue;
width: calc(25% - 10px);
height: 100px;
float: left;
margin: 5px;
}
.center {
background-color: black;
width: calc(50% - 10px);
height: 100px;
float: left;
color: white;
margin: 5px;
}
.right {
background-color: red;
width: calc(25% - 10px);
height: 100px;
float: left;
margin: 5px;
}
.footer {
background-color: orange;
height: 50px;
}
</style>
</head>
<body>
<div class="main clearfix">
<div class="left">
左
</div>
<div class="center">
真ん中
</div>
<div class="right">
右
</div>
</div>
<div class="footer">
</div>
</body>
</html>
clearfixの書き方
floatを解除するclearfixについて見てきましたが、clearfixの書き方についてはいくつか種類があります。
clearfixの書き方の種類の違いとしては対応しているブラウザの違いや、先程の例ではafter要素を使っていますが、他の要素を使った書き方などclearfixのやり方が異なっています。
それではいくつかclearfixの種類をご紹介していきます。
micro clearfix
こちらは今回ご紹介する他のclearfixに比べても短く描けるclearfixです。Firefox 3.5以降、Safari 4以降、Chrome、Opera 9以降、IE 6以降に対応しています。
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
Position Is Everything版
下記サイトで紹介されているclearfixです。
<style type="text/css">
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style><!-- main stylesheet ends, CC with new stylesheet below... -->
<!--[if IE]>
<style type="text/css">
.clearfix {
zoom: 1; /* triggers hasLayout */
} /* Only IE can see inside the conditional comment
and read this CSS rule. Don't ever use a normal HTML
comment inside the CC or it will close prematurely. */
</style>
<![endif]-->
結局どれがいいのか？
clearfixの書き方に違いがあれど、HTML初心者の方からすると、いずれもモダンなブラウザについては「floatを解除する」という大前提は抑えているので、どのclearfixを使ってもいいかと思います。
今回ご紹介したclearfixをコピペして使えばfloatが解除されます。
しかし「マイナーだけど、このブラウザもサポートすべきだよね！」「こちらの方がスマートな書き方じゃない？」と後から要望が出てきたと時に最新のclearfixの書き方を調べて拘るという順番でいいかと思います。
まとめ
いかがでしたでしょうか？
HTML初心者の方がfloatの横並びを覚えて興奮し、そしてすぐにデザインが崩れて挫折する事はよくあるかと思います。clearfixはfloatによるレイアウト崩れの救世主になれる存在です。
ぜひclearfixの使い方・書き方をマスターして、floatとともに使いこなしましょう！
またclearfixを試してみたけどclearfixが「効かない」問題で困っている方はぜひ下記の記事を参考にしてみて下さい。
