【CSS】floatは不要?!flexboxだけで対応出来るか

「display: flex;」これが使えるようになってFloatは過去のものになってきています。

ウェブの歴史においてデザインの自由度が少なかった時代からテーブルを駆使したレイアウトなどを経て、長らく横並びのレイアウトにはfloatが主流となっていました。

そしてflexbox、gridの時代へ、、、

つい最近も初学者の方にこんな質問を受けました。

「floatってまだ使うことあるんですか？」

あ、、
今どきの若者はけしからん、、、
じゃないですがHTML/CSSに触れて間もない方はfloatは完全に過去のもの、不要と感じるのかと多少の驚きと、まあそうかという納得。

断言します。

Floatは現役です。まだ引退してません！

flexやgridがあるのになぜか、、

これに尽きます。

文章の横に画像配置するなどの場合の回り込みに使われるのがfloatの正しい用途です。

それが2カラムや複雑な横並びレイアウトに駆使され出したのがひと昔前。

今はflexなどにそちらは任せて本来の用途である回り込みに集中できるようになったというところでしょうか。

でもflexでfloatの代わりは出来るのであればやっぱり要らないのでは？と思われる方

実はflexではfloatが用いられるような回り込みは出来ません。

【CSS】float:rightによる画像回り込みテキストの図

上の図のようないわゆる回り込みはfloatの専売特許です。

【CSS】display:flex;での横並びの図

対してFlexはあくまでボックス内でのレイアウトや並びを制御するプロパティです。

図のように隣の要素の下へは回り込まず、要素が横並びに配置されます。

まだまだ現役のFloat、

回り込み解除の「clear:both」や疑似要素でのclearfixなど上手く使い方に慣れ親しんで活用していきましょう。

ABCウェブエンジニアblog