flex世代のためのゼロから学ぶfloatレイアウト
前田 大地
かなり昔に制作されたウェブサイトを何らかの事情で修正しなければならないとき、ありますよね。昔のサイトでは、現在ほとんど使用されていないCSSが使われていることもあります。そして、その代表格がfloatであり、慣れない人にとっては難解なCSSだと言えます。そんなfloatについて、現代のコーダーさんが知っておくと安心なポイントをまとめてみました。
目次
なぜ、2026年にfloatの話？
Web界隈でfloatレイアウトが猛威を振るったのは、もう15年以上も昔のことです。現役のコーダーさんの多くが、floatでレイアウトを組んだ経験がないかと思います。そして、今後もそんな経験をすることは永遠にないでしょう。
ですが、15年前のウェブサイトには高確率でfloatが使われていました。floatでレイアウトされたサイトの修正依頼が舞い込む可能性はゼロではありません。そんなとき、慌てず、焦らず、スマートに対応できたら、かっこいいと思いませんか。
と、いうのは建前で、本当は、なんか無性にfloatについて語りたくなったからです。
そもそもfloatってなんですか？
floatとは、要素を回り込みさせるためのCSSプロパティです。floatを指定された要素は通常のフローから外れて（浮いて）、すぐ後ろにある要素の右や左に回り込みます。雑誌のレイアウトみたいに、画像の横に文章を流しこむ、そんな用途で使用されます。
今でも、WordPressの画像ブロックで「右寄せ」「左寄せ」を選ぶと、内部的にはfloatが使われてたりします（テーマにもよりますが）。目にする機会は少ないですし、ましてや自分で指定することはほとんどないかもしれませんが、floatはけっしてレガシーではなく現役のCSSプロパティだと言えます。
.wp-block-image .alignleft {
float: left;
}
なぜ、floatでレイアウトするの？
では、なぜ20年前の人たちはfloatでレイアウトしたのでしょうか？
はるか昔、CSSは現在と違って「要素の色を変える」程度の使い方が主流でした。その当時、要素を横に並べるために使われたのが、HTMLのtableタグです。いわゆるtableレイアウトというやつで、ページ全体をtableタグで囲い、colspanやrowspanを組み合わせて複雑なレイアウトを実現していました。ちょっとgridっぽいですね。
しかし問題もありました。まず、HTMLコードが人間では解読できないほど複雑になりました。colspanとrowspanが入り乱れ、要素が出てくる順番もめちゃくちゃ。コーダーは、Dreamweaverなどのビジュアルエディタでセルを確認しながら慎重に作業する必要がありました。
flexもgridも存在しない時代。ブラウザ間の差異も大きい。正攻法だとCSSだけで段組みは作れない。そんなとき、どこかの誰かがfloatを使って要素を横並びにする手法を編み出しました。そこからどんどん「HTMLは文書構造、見た目はCSS」みたいな風潮が高まって、Web2.0全盛期に突入しました。
floatによる段組みは、いわばハック的な手法なのですが、それでも憔悴するコーダーの救世主となりました。そしてflexやgridが登場するまで、レイアウト手法の主流として君臨します。
floatレイアウトの基本形
floatレイアウトの基本形は3つで、これらを組み合わせてレイアウトを組むことが多いです。
A. 左右寄せ
B. 片側寄せ
C. 変則左右寄せ
A. 左右寄せ
1つを左に、もう1つを右にfloatさせる、いちばんの基本形です。
<div class="parent"> <div class="child1"></div> <div class="child2"></div> </div>
.parent::after {
display: block;
clear: both;
}
.child1 {
width: 47.5%;
float: left;
}
.child2 {
width: 47.5%;
float: right;
}
B. 片側寄せ
子要素を同じ方向にfloatさせるタイプの形。例えばブログ記事一覧ページで1列に3つずつ記事を並べる場合などに使われます。
<div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>
.parent {
margin-top: -30px;
margin-left: -3.125%;
}
.parent::after {
display: block;
clear: both;
}
.child {
float: left;
width: 31.25%;
margin-top: 30px;
margin-left: 3.125%;
}
親要素のネガティブマージンで子要素のマージンを相殺することで、幅の合計を100%にしています。
C. 変則左右寄せ
左右に振る2カラムと同じことを、より少ないコードで実現した形です。2番目の子要素にfloatが指定されていないため、ちょっと気づきにくいです。
<div class="parent"> <div class="child1"></div> <div class="child2"></div> </div>
.parent::after {
display: block;
clear: both;
}
.child1 {
width: 47.5%;
float: left;
}
.child2 {
margin-left: 52.5%;
}
clearfixとは？
floatレイアウトの多くで、clearfixというテクニックが使用されています。これは、floatによる回り込みを解除するために用いられます。
clearで回り込みを解除
floatが指定された要素は、通常のフローから外れて浮いた状態になります。そのため、親要素は何も入っていないのと同じ状態になり、高さが0になります。子要素にposition: absolute;を指定したときと似たような挙動ですね。
その状態を解除するためにclearというプロパティが用意されています。clearが指定された要素は、floatされた要素の下にピッタリとくるように、margin-topが自動で計算されます。
.elem {
clear: both;
}
親要素のafterでclearする
floatの回り込みは、後続の要素にclearを指定することで解除できます。でも、floatとそれに対応するclearのセットがセクションをまたいだりすると保守性が非常に悪くなります。そのため、floatはその親要素内で解除するのが一般的です。
clearを解除するためだけの空DIVを用意してもいいのですが、構造上意味のない要素が増えるのはよろしくありません。そこで登場したのが、親要素のafter疑似要素にclearを指定するclearfixというテクニックです。
.parent::after {
display: block;
clear: both;
}
clearfixのコードは、時期によって何パターンか存在しますが、現代のブラウザであれば上記の2行で十分です。
親要素にoverflow: hidden;を指定する方法でも回り込みを解除できます。手軽なため当時はよく使われましたが、本来の用途とは異なるため、今あえて使う理由はありません。
.parent {
overflow: hidden;
}
現在ならdisplay: flow-root;を使う
現在では、clearfixを使わなくても、親要素にdisplay: flow-root;を指定すれば、子要素にfloatがあったとしても親要素の高さがちゃんと伸びます。新しくコードを書くならflow-rootを使うのがいいかと思います。
.parent {
display: flow-root;
}
トラブルの解消
floatは、その性質から表示崩れを引き起こしやすいプロパティです。
解除忘れ
floatを使用したとき、適切にclearで解除していないと次の要素が回り込んでしまい崩れます。floatしていない要素が、直前の要素の右や左にいってしまう場合は、たいてい直前のfloatが原因で、clearすることで直るケースがほとんどです。
また、回り込みを解除する目的で親要素にoverflow: hidden;が指定されている場合があります。不要だからとプロパティを削除したり、別の値に変更してしまうと表示が崩れる原因になります。
カラム落ち
floatは、flexと異なり横幅の合計が100%を超えるとカラム落ちします。
昔のIEにはmarginが2倍になるバグがありました。その影響で、本来はmarginを使うべき場面でpaddingが使われているケースもあります。また、当時はbox-sizingの主流がinline-boxでした。paddingやborderが要素の幅に含まれない計算方式です。これを見落として幅が100%を超えてしまうケースもあるので、幅の計算時にはbox-sizingの値にも注意してください。
あとがき
floatは、本来の仕様と、実際に使われる用途が最もちぐはぐなCSSプロパティです。今はflexやgridがあるのでレイアウト目的で使われることはありませんが、古いサイトの修正案件などで見かけたら用心しましょう。理解してしまえば難しいことはありません。
私は、このAI全盛期のご時世に、floatなんかの記事を完全手動で書いたことにご満悦です。