初心者向けCSS floatプロパティとは？基本の使い方について解説！

公開日：2021.08.31

スキルアップ

Webサイトを作成する際、要素を横並びにするために使用するのがfloatプロパティです。floatはCSSプロパティのなかでも使用頻度が高いため、ぜひマスターしておきたいプロパティの一つでもあります。

実際にCSS floatを使用したことがある方のなかには、思うようにレイアウト変更ができずに苦労したことがある方も多いのではないでしょうか。

この記事では、floatプロパティの値の種類や、実際にfloatプロパティを設定する方法について解説していきます。

floatプロパティによる回り込みを解除する方法や、消えてしまった要素を再度表示する方法についても触れていくので、ぜひ最後までご覧ください。

CSS floatプロパティとは

CSSとは、Webサイトの要素を装飾したり、表示方法を指示する仕様のことです。このCSSにはさまざまなプロパティが存在します。CSSプロパティの一つであるfloatは、縦に並んでいた要素を「横並び」にすることのできるプロパティです。

floatプロパティはWebサイトのレイアウトを整えたり、変更する際に使用されます。

また、floatを適用していない要素は、floatを適用した要素の周囲に自動で回り込むという特徴もあります。そのためfloatを使用する際は、単に要素を移動させるだけではなく、移動させない要素に対してfloatを機能させないようにすることも必要になります。

なお、CSSについて詳しく知りたい方は、別の記事『CSSとは？CSSで出来ることや書き方について紹介！』も併せてご覧ください。

floatプロパティの値の種類

floatの値には「left」「right」「none」の3種類があります。

それぞれの特徴は以下になります。

left：要素を左寄せにする
right：要素を右寄せにする
none：配置を指定しない（初期値）

CSS floatプロパティの「left」と「right」は、要素を移動させる際に使用する値です。要素を左寄せにする場合はleft、右寄せにする場合はrightを使用します。floatプロパティではおもにこの2種類の値を使うことになります。

「none」はfloatプロパティをなかったことにできる特殊な値です。noneを使用するシーンとしては、例えば「パソコン用のサイトでは横並びにしていた要素を、スマートフォンで閲覧する際は無効化させたい」場合などで使用されます。

CSS floatプロパティの書き方

CSS floatプロパティは「float: 値;」の形式で記述します。

この章では、CSS floatプロパティ「left」と「right」の書き方について、具体例を見ていきましょう。

要素を左寄せにする方法

要素を左寄せにする方法です。floatを適用したい要素に対して、CSSに「float: left;」を記述します。

div を左寄せにする場合は以下のように記述します。


    div {
        float: left;
    }

「float: left;」を設定すると、縦並びになっていた要素を、左から順番に横並びにすることができます。

要素を右寄せにする方法

次に、要素を右寄せにする方法です。floatを適用したい要素に対して、CSSに「float: right;」を記述します。

div を右寄せにする場合は以下のように記述します。


    div {
        float: right;
    }

「float: right;」を設定すると、縦並びになっていた要素を、右から順番に横並びにすることができます。

CSS floatプロパティによる回り込みを解除する方法

CSS floatによる回り込みを解消したいという場合は、「CSS clear」プロパティを使用します。

CSS clearプロパティの値には、「left」「right」「both」の3種類があります。

left：「float: left;」をかけた要素に続く要素が、左寄せで回り込むことを解消
right：「float: right;」をかけた要素に続く要素が、右寄せで回り込むことを解消
both：floatをかけた要素に続く要素の回り込みを解消

clearプロパティを指定する際は、基本はbothを使用します。実際にどのように記述するのかを見ていきましょう。

div で回り込みを解消する場合の記述方法は以下のようになります。


div {
    clear: both;
}

上記のように、clearプロパティを指定した要素は、floatの左右に対する回り込みが解除されます。

また、clearプロパティで「left」や「right」を設定するケースはあまりありませんが、もしleft やright を用いる際は、floatと同じ値（floatがleftの場合はclearもleft）を設定することで回り込みを解除することができます。

「float: left;」を解除する場合


div {
    clear: left;
}

「float: right;」を解除する場合


div {
    clear: right;
}

「clear: both;」を設定することで、「float: left;」と「float: right;」両方の回り込みを解除できるため、基本は「both」を使用すると覚えておくとよいでしょう。

CSS floatで消えた要素を表示する方法

特定の要素にfloatを設定した際に、floatを設定していない要素が消えてしまうことがあります。これはfloatを設定していない要素が、設定した要素の下に回り込んでしまうことで起こります。

なぜこのようなことが起こるのでしょうか。

floatプロパティを指定した要素は、いわゆる「浮いている」状態となります。そのため浮いていない要素（floatプロパティを指定していない要素）が、浮いている要素（floatプロパティを指定した要素）の下に回り込む可能性があります。

つまり、floatを指定していない要素が「画面上から見えない位置」に移動した状態となるのです。

CSS floatによる回り込みには、さまざまな解決方法がありますが、「clearfix」を用いると簡単に解決することができます。

clearfixを指定すると、浮いた状態になっている要素に、他の要素が回り込むことを防ぐことができるようになります。

回り込みを解消する「clearfix」クラスの書き方

ここでは「c01」という要素の下に「c02」が回り込んでいるとして、「c01」にclearfixを指定してみましょう。

HTMLでは、clearfixを指定するHTMLの要素をdivで囲みます。


<body>
    <div class="clearfix">
        <div class="c01">青</div>
    </div>
    <div class="c02">赤</div>
</body>

次に、CSSで以下のようにclearfixを指定します。


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

上記のようにclearfixを指定することで、「c01」の要素に他の要素が回り込むことができなくなります。

また、「overflow: hidden;」を使用することでもfloatによる回り込みを解除することが可能です。

「clearfix」の例

実際にclearfixを使ってHTMLを修正してみましょう。

次のサンプルを表示すると、画像のように、箱が2つしか表示されません。


<body>
    <div class="c01"></div>
    <div class="c02"></div>
    <div class="c03"></div>
</body>

<style>
.c01 {
    width:100px;
    height:100px;
    float:left;
    overflow: hidden;
    background-color:#ff6666;
}
.c02 {
    width:100px;
    height:100px;
    float:left;
    overflow: hidden;
    background-color:#ffff66;
}
.c03 {
    width:100px;
    height:100px;
    background-color:#6666ff;
}

HTML上では3つあるはずの箱が2つしか表示されないのは、赤い箱の下に3つ目の箱がもぐってしまっているからです。こういう場面でclearfixを使うとどうなるのでしょうか。


<body>
    <div class="clearfix">
        <div class="c01"></div>
        <div class="c02"></div>
    </div>
    <div class="c03"></div>
</body>

<style>

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

.c01 {
    width:100px;
    height:100px;
    float:left;
    overflow: hidden;
    background-color:#ff6666;
}
.c02 {
    width:100px;
    height:100px;
    float:left;
    overflow: hidden;
    background-color:#ffff66;
}
.c03 {
    width:100px;
    height:100px;
    background-color:#6666ff;
}

※
太字が追記部分となります

無事3つ目の箱（青）が表示されました。これは赤い箱と黄色い箱に設定されている float:left; をclearfixによって無効化したためになります。

このようにclearfixを使うことで、floatを利用した際に発生しうる想定外の挙動をコントロールすることが可能になります。

CSSのfloatをマスターしてレイアウト崩れをコントロールしよう！

この記事では、CSS floatプロパティを用いて、縦並びになっている要素を横並びにする方法について解説してきました。

Webサイトの作成では、レイアウトが崩れてしまうことが多くあります。そのレイアウト崩れの原因となりやすいのが、今回紹介したCSS floatプロパティです。

CSS float はWebサイトの作成にかかせないプロパティですが、イメージをつかむのが難しいプロパティでもあります。慣れるまでは「要素が回り込む」ということの理解に苦戦することもあるかもしれません。

CSS floatプロパティによる要素の回り込みについて正しく理解し、適切な対処を行なうことで、Webサイトのレイアウト崩れを解決することが可能となります。

実際にCSS floatを使用し、要素がどのように移動するかを繰り返し学習するとよいでしょう。

（2021年8月現在）