どうも、7noteです。今回は真面目にclearfixについて解説していきます。

CSSでfloatの使い方を調べると、「clearfixしてください！」みたいなのを書いてる記事をみたことありませんか？
私も初めてclearfix使った時は「なんだこれ？」って感じであまりうまく使えてなかったです。なんかそういうfloat使う時の決まり文句的な物だと思ってました。

でも、今なら仕組みがわかるので解説していきます！意外と丁寧にclearfixについて解説している記事は多くないので、
この記事を読んで、みなさんもclearfixとfloatを使いこなしてください！

clearfixの例

googleなどで検索して出てくるclearfixの記述例として以下のような物が検索で出てくると思います。
今回はこのclearfixを使って解説していきます。

style.css

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

.clearfix {
    display: block;
}

clearfixを使うソース（float）

index.html

<header>ヘッダー</header>
<main class="clearfix"> <!-- clearfixのclassをつける -->
    <article>ここに記事の文章がきます。ここに記事の文章がきます。</article> <!-- cssでfloatさせる -->
    <aside>サイドバー</aside> <!-- cssでfloatさせる -->
</main>
<footer>フッター</footer>

style.css

article,
aside {
    float: left; /* articleとasideをfloatさせて横並びに。 */
}

    /* わかりやすくするために幅と背景色を指定 */
    header {
        width: 400px;
        background: #FCC; /* 背景に赤色を指定 */
    }
    article {
        width: 300px;
        background: #CFC; /* 背景に緑色を指定 */
    }
    aside {
        width: 100px;
        background: #CCF; /* 背景に青色を指定 */
    }
    footer {
        width: 400px;
        background: #FCC; /* 背景に赤色を指定 */
    }

完成図

もしclearfixがないと・・・

このように、空いている隙間にフッターが入り込んでしまいます。

そもそもfloatとは？

floatというのは日本語で言うと「回り込み」です。今回はタグの中で、記事とサイドバーが横並びに並べるためにつかってます。floatしている要素を無視して次のフッターの要素が上に詰めようとして隙間に入ってしまった状態です。floatの解説は簡単に。

clearfixの解説

clearfixは、floatさせている要素の親要素に対して入れることが一般的ですね。
じゃあなぜclearfixを入れると、フッターが隙間に回り込まなくなるのか？その秘密はcssの「clear: both;」にあります。
この「clear: both;」がいわゆる回り込みを解除しなさいと言う意味のCSSになります。
そして、clearfixのついている要素の疑似要素（::after）に「clear: both;」があることで、floatの回り込みがここで解除されます。

（ヘッダー）
<メイン>
    <記事>
    <サイドバー>
    ::after  ←ここにclearfixの疑似要素が入り、このタイミングで回り込み解除が入る。
<メイン終>
（フッター）

「clear: both;」はブロック要素に当てないと期待通りの効果がないので注意！

まとめ

最初はfloatを使うときは、親要素にclearfixをつけると言う覚え方で問題ないと思います。
ただ、複雑なページや大規模なサイトを作るときはしっかりとclearfixの仕組みを理解しておくと、綺麗なソースが書け、開発時間の短縮にもなります。
ぜひ使いこなしてマスターしてください！