CSSのclearfixとは？floatで崩れるレイアウトを防ぐ方法を初心者向けに解説

1. floatでレイアウトが崩れる理由（高さの消失）

1. floatでレイアウトが崩れる理由（高さの消失）

CSSのfloatプロパティは、もともと「画像にテキストを回り込ませる」ために作られた機能です。しかし、ボックスを横に並べるレイアウト手法として長年使われてきました。

ここで初心者が最もつまづきやすいポイントが、「親要素の高さが消えてしまう」という現象です。float（浮く）という言葉の通り、指定された要素は通常の配置ルールから浮き上がった状態になります。すると、親要素は「中に要素が入っていない」と勘違いしてしまい、高さが0になったり、背景色が消えたりしてレイアウトがガタガタに崩れてしまうのです。

<style>
    .parent {
        background-color: #f8d7da; /* 薄い赤色の背景 */
        border: 2px solid #dc3545;
        padding: 10px;
    }
    .child {
        float: left;
        width: 150px;
        height: 100px;
        background-color: #007bff;
        color: white;
        margin: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .text {
        margin-top: 20px;
        color: #333;
    }
</style>

<div class="parent">
    <div class="child">floatしている子要素1</div>
    <div class="child">floatしている子要素2</div>
</div>

<p class="text">
    ↑本来なら赤い枠（親要素）が子要素を包むはずですが、floatの影響で高さが消え、枠が潰れてしまっています。
</p>

このように、子要素が浮いてしまうことで親要素が中身を認識できなくなる状態を理解することが、clearfixを使いこなすための第一歩です。

2. clearで崩れを回避する方法

2. clearで崩れを回避する方法

floatの影響を受けないようにするには、clearプロパティを使います。clearにはleft、right、bothがあります。bothを使うと、左にも右にもfloatがある場合に影響を受けず、次のブロック要素が正しい位置に表示されます。

<style>
    .box-left {
        float: left;
        width: 100px;
        height: 80px;
        background-color: lightblue;
        margin-right: 10px;
    }
    .box-right {
        float: left;
        width: 100px;
        height: 80px;
        background-color: lightcoral;
    }
    .clear-both {
        clear: both;
    }
</style>

<div class="box-left">左ボックス</div>
<div class="box-right">右ボックス</div>
<div class="clear-both"></div>
<p>clear-bothを入れることで、この段落はボックスの下から表示されます。</p>

3. clearfixとは何か？float崩れをまとめて防ぐ方法

3. clearfixとは何か？float崩れをまとめて防ぐ方法

clearfixは、親要素に対してfloatの影響を自動でリセットし、親要素の高さを正しく表示させるテクニックです。floatを使った古いレイアウトで必須だった方法で、CSSだけで簡単に対応できます。

<style>
    .clearfix::after {
        content: "";
        display: block;
        clear: both;
    }
    .float-box {
        float: left;
        width: 120px;
        height: 80px;
        margin-right: 10px;
        background-color: skyblue;
    }
</style>

<div class="clearfix">
    <div class="float-box">ボックス1</div>
    <div class="float-box">ボックス2</div>
</div>
<p>clearfixを親要素に追加すると、floatされたボックスの下に正しい高さが確保されます。</p>

4. clearfixを使うメリットと古いレイアウトの理解

4. clearfixを使うメリットと古いレイアウトの理解

clearfixを使うことで、floatを利用した古いレイアウトでもボックスの高さ消失や重なりを防げます。初心者がfloatやclearの動きを理解するのに役立ちます。現在はフレックスボックスやグリッドレイアウトが主流ですが、clearfixの仕組みを知っておくと、古いウェブサイトの修正やメンテナンスに便利です。

clearfixは「floatで崩れやすいレイアウトを安全に保つCSSテクニック」と覚えておくと良いでしょう。

まとめ

まとめ

ここまで、CSSのfloatによるレイアウト崩れと、その対処法としてのclear、そしてclearfixについて詳しく見てきました。floatは、画像の回り込みや横並びレイアウトを簡単に実現できる便利なプロパティですが、親要素の高さが消えてしまうという特徴があります。この仕組みを理解していないと、背景色が表示されない、次の要素が重なってしまうなど、見た目に大きな影響が出てしまいます。

まず重要なのは、floatされた要素は通常の文書の流れから外れる、という点です。その結果、親要素は中身がないと判断され、高さがゼロになってしまいます。この状態を放置すると、HTML構造自体は正しくても、CSSの影響でレイアウトが破綻して見える原因になります。初心者が最初につまずきやすいポイントでもあり、なぜこうなるのかを知ることが、CSS理解の第一歩と言えます。

clearプロパティは、floatの影響を受けないようにするための基本的な方法です。clear bothを指定した要素を挿入することで、floatされた要素の下に通常の流れを取り戻すことができます。ただし、この方法はHTMLに余分な要素を追加する必要があり、構造が少し冗長になりがちです。小規模なレイアウトでは問題ありませんが、ページ全体で多用すると管理が大変になります。

そこで登場するのがclearfixです。clearfixは、疑似要素を使って親要素自身にclearの役割を持たせるテクニックです。HTMLを汚さず、CSSだけでfloatによる高さ消失を防げるため、長年にわたって多くのウェブサイトで使われてきました。特に、古いサイトやfloatベースで組まれたレイアウトを理解するうえでは、欠かせない知識です。

現在のウェブ制作では、flexboxやgridといった新しいレイアウト手法が主流になっています。しかし、既存のコードを読む場面や、過去のHTMLやCSSを修正する場面では、clearfixが使われているケースは今でも少なくありません。そのため、float、clear、clearfixの関係を理解しておくことは、実務においても大きな意味があります。

まとめとしてのサンプルプログラム

<style>
.container {
    border: 2px solid #333;
    padding: 10px;
}
.container::after {
    content: "";
    display: block;
    clear: both;
}
.item {
    float: left;
    width: 100px;
    height: 80px;
    margin-right: 10px;
    background-color: lightgreen;
}
</style>

<div class="container">
    <div class="item">項目A</div>
    <div class="item">項目B</div>
</div>
<p>clearfixを使うことで、親要素の枠線が中のボックスを正しく包み込みます。</p>