floatはもう古い!?flexとfloatの違い,使い分け,併用方法を解説

こんにちは。テイクです。ホームページを作り続けて9年になります。

横並べをするためのCSSといえば昔はfloatでした。
しかし、floatは崩れやすく、調節が面倒だったり、CSS初心者がはまりやすいポイントの一つです。

今はdisplay:flexがあり、これで簡単に横並べできます。

display:flexとfloatの違い、使い分け、併用方法を解説します。

↓もしfloatがうまくいかなくて困っているなら下記記事を参考にしてください。

↓display:flexの基本はこちら

floatは古い。今はflex

floatもdisplay:flexも横並びができるCSSです。

昔は横並びするにはfloatかtableしかありませんでしたが、今はdisplay:flexがあります。

違いについて詳しくは後述しますが、基本的にfloatはできることが少ない分デメリットが多く、display:flexはできることが多い分メリットが多いです。

floatでもflexでもできることはflexを使うことをおススメします。

flexとfloatの違い

	flex	float
新旧	新	旧
崩れ	崩れない	崩れる
高さ	揃う	揃わない
CSS指定箇所	親要素	自身
画像に対する テキストの回り込み	不可	可能
回り込みの リセット	不要	必要

新旧

display:flexは新しくCSS3から、floatは古くCSS1からあります。

2021年時点でflexは主要ブラウザ最新版に対応しており、使うことができます。

崩れ

flexは子要素の幅の合計値が親の幅を超えている場合、tableのように自動計算され子要素の幅が調整され、2段になるなど、崩れません。

一方floatは子要素の幅の合計値が親の幅を超えている場合、子要素の幅は変わらず、2段になり崩れます。

CSS初心者殺しです。

これがflaot最大のデメリットといっていいでしょう。

なお、flexが崩れないのは「flex-wrap: nowrap」が指定されているからであり、「flex-wrap: wrap」で意図的に崩す（2段にする）ことも可能です。

高さ

flexは横並びの要素を高いほうに合わせて同じ高さにできます。

floatは同じ高さにはなりません。

flexには「align-items: stretch」が指定されていると同じ高さになります。

「align-items: flex-start」を指定することでそれぞれの高さにすることもできます。

CSS指定箇所

flexは親要素に指定し、その子要素すべてを横並べします。

floatは横並べする要素自身に指定します。

画像に対するテキストの回り込み

flexは要素間を明確に区分けします。

回り込みのリセット

floatは回り込みを避ける、終わらせる必要があります。兄弟要素の最後の要素に「claer:both」を指定するか、親要素に「overflow: hidden」を指定します。

flexは不要です。

flexとfloatの使い分け（floatを使うとき）

floatでできることはflexでもできるため、基本的にflexを使うことをオススメします。

ここではfloatを選択するとき（選択せざるを得ないとき）を紹介します。

古いブラウザなどをサポートする必要がある

display:flexは古いブラウザでは使えない場合があります。

また、ホームページビルダーなどの編集モードではflexが効きません。

flexが効かない古いブラウザやソフトでも崩れないようにする案件であればfloatを使わざるをえません。

画像の横にテキストを配置し、長い場合画像の下にテキストを配置する

先に記述した画像の回り込みはfloatの特徴の一つです。

flexではできない芸当であるため、どうしても実装したい場合floatを使いましょう。

firefoxの印刷に対応させたいとき

firefoxではflexを指定している要素を印刷した場合がA4印刷範囲からはみ出た分が消えるか崩れます。

これについては明確な回避策がなくfloatを使うしかありません。

flexとfloatの併用方法

古いブラウザではfloatを効かせて、新しいブラウザではflexを効かせたいときはflexとfloatを併用しましょう。

併用するには下記のように記述します。

<style>
.example{
    display: flex;
    overflow: hidden;
}
.example div{
    width: 50%;
    float: left;
}
</style>
    
<div class="example">
    <div>左</div>
    <div>右</div>
</div>

親要素に「display: flex」を指定します。「overflow: hidden」はfloatの崩れを回避するために指定します。

子要素には幅の指定と「float: left」を指定します。

幅はfloatでも崩れないように慎重に指定しましょう。

実装後はIEの開発者ツールでバージョンを下げて確認しましょう。

flexが効くときはflexが優先されます。

flexが効かないときはfloatが効きます。

まとめ

横並びは基本的にdisplay:flexを使う。

flexが効かないブラウザにも対応させるときはfloatとflexを併用する。

以上、display:flexとfloatの違い、使い分け、併用方法を解説しました。