HTML・CSS

「float」プロパティの使い方を簡単解説【初心者向け】

こんにちは、Autumn(オータム)です。
今回はCSS初心者がつまずきやすいポイント第三弾として「float」プロパティの解説を行います。

WEB制作において必ずと言っていいほど出てくるポイントですので、しっかりマスターしていきましょう。

floatについて

「float」プロパティが使われるポイントは、複数の要素を横並びにしたい時がほとんどです。

最近では「flexbox」も多く使われることが多いですが、IE(Internet Explorer)での確認時にバグが起こることもあるため、その時はfloatで対応しなければならない場合もあります。

※先日マイクロソフトがIEのサポートを来年6月15日で終了するとの発表がありましたので、もうしばらくの辛抱ですね。笑

それでは早速始めていきましょう!

floatの使い方

例として、こちらの3種類の要素(red、green、blue)を横並べにしていきます。

ソースコードはこちら。
【HTML】

【CSS】

それではまず、「green」「blue」を並べてみましょう。
並べたい要素に「float」プロパティを記述します。

これでブラウザを確認してみると、

この通り横並びになりました!

続いて、「red」「green」を並べてみます。
今回はredとgreenのみにfloatを記述し、ブラウザを確認します。

すると、redとgreenは横並びになりましたが、blueが消えてしまいました。。

floatをかけると、その後の要素(blue)をfloatをかけた要素の下に巻き込んでしまう性質があり、ここが初心者が混乱するポイントです。

それを防ぐための武器が、「clearfix」です。
clearfixのソースコードはこちら。

名前はこれじゃないといけないというルールはありませんが、よく使われるクラス名なので、一つのフォーマットとしてfloatプロパティとセットで覚えておきましょう。

これを親要素のクラスに追加します。
また、同じ親要素の中だとblueがまた巻き込まれるので、外に出しておきます。

ブラウザを確認してみると、

このようにblueはそのままで、redとgreenのみ横並びにすることができました。

まとめ

それでは最後に今回のポイントをおさらいします。

– 横並びにしたい要素に記述する
– floatをかけると、その後の要素も巻き込む性質がある
– 「clearfix」を親要素にかけて巻き込みをブロックする

floatプロパティは少しクセがありますが、使いこなせば自由度の高いレイアウトを作ることができるようになります。

知識の幅を広げて、どんな状況にも対応できるようにしておきましょう!

読んでいただきありがとうございました!

ABOUT ME
Autumn
元は文系卒・知識ゼロの住宅営業マン。半年のプログラミング完全独学でフロントエンドエンジニアに転職。現在はWEB制作・WEBマーケティングを社内で担当。田舎で自然と共に暮らしてます。