コーディング犬に聞く：「floatってもう古いの？」

「元々は“回り込み”のためのCSSです。」

例えば、

• 画像の横に文章を回り込ませる

みたいな用途で使われていました。

img{
  float: left;
}

すると、

画像の右側に文章が流れます。

新聞や雑誌っぽいレイアウトですね。

「本来は違います。」

でも昔は、

“横並びを作る方法”

が少なかったんです。

なので、

.box{
  float: left;
}

で横並びレイアウトを作っていました。

「かなり多かったです。」

例えばこんな感じ。

.left{
  float: left;
  width: 70%;
}

.right{
  float: right;
  width: 30%;
}

これで、

• メインコンテンツ
• サイドバー

を横並びにしていました。

「今はflexが主流です。」

例えば、

.wrap{
  display: flex;
}

これだけで横並びできます。

昔のfloatより、

圧倒的に簡単です。

「レイアウト用としては扱いづらいからです。」

floatは元々、

“回り込み”

のための機能です。

だから、

横並びレイアウトに使うと問題が起きやすいです。

「親要素の高さが消える問題です。」

例えば、

<div class="parent">
  <div class="child"></div>
</div>

.child{
  float: left;
}

すると、

親要素の高さが消えることがあります。

初心者がかなりハマるポイントです。

「floatすると通常の流れから外れるからです。」

CSSには、

“通常フロー”

という考え方があります。

でもfloatした要素は、

その流れから外れます。

だから親が、

「中身ないじゃん」

と判断してしまうんです。

「clearfix地獄でした。」

有名なのがこれ。

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

これを毎回書いていました。

初心者にはかなり難しかったです。

「全部です。」

例えば、

横並び

display: flex;

中央寄せ

justify-content: center;

縦中央

align-items: center;

float時代だと大変だったことが、

かなり簡単になりました。

「完全には消えてません。」

例えば、

画像回り込み

img{
  float: left;
}

これは今でも使います。

つまり、

• レイアウト → flex/grid
• 回り込み → float

という感じです。

「flexは1列、gridは2次元です。」

ざっくり言うと、

• flex → 横 or 縦
• grid → 行と列

を管理できます。

今のWeb制作は、

• flex
• grid

が中心です。

「めちゃくちゃあります。」

特に、

• 古いWordPressテーマ
• 昔の企業サイト
• IE対応時代

のコードではよく出ます。

だから、

「floatは古いから不要」

ではなく、

“読めるようにはしておく”

のが大事です。

「まずはflex優先でOKです。」

今から学ぶなら、

優先順位はこんな感じ。

1. flex
2. grid
3. float

です。

でも、

floatを知らないと古いコードを読めないので、

基本だけは知っておくと安心です。