floatを使った横並び、回り込みの仕組みについて

横並びにするだけなのに、なんだか面倒な「float」プロパティの使い方や仕組みについて解説します。ついでにclearfixを使ったfloatの解除や、そもそも学習すべきなのかについて解説していきます。

今回はこんな感じのページを作りながらfloatの仕組みについて解説します。

float 画像

見やすさ重視で最低限のテキストと背景色で装飾してあります。

floatを使う部分はこの画像とテキストの部分ですね。画像の横に文章を配置するよく見かける構成です。

スポンサーリンク

floatの下準備

まずはhtmlで骨組みを作ります。

html

つぎは各要素に色やサイズを指定して見た目を整えます。

css

これをhtmlで表示するとこうなります。

注意点として横並びにする画像とテキストには包括する親要素が必要になるので、忘れずに用意します。今回はdivにmainというクラス名をつけてあります。

floatを使って横並びにする

ではimageとtextのクラスにそれぞれfloatを使います。

するとこうなります。

横並びにはなりましたが、footerがなくなりました。 何故こんなことになるのでしょうか。

スポンサーリンク

なぜこうなるのか

GoogleChromeの検証を使って調べています。

まずfooterですが、消えてしまったのではなくmainの下に配置されていることがわかります。

次にmainを見てみると600×0と表示されています。width×heightなので、高さがなくなっている状態です。

つまりfloatは親要素であるmainもろとも浮かせる事で、中身の子要素を左右自由に配置できる、という特性があるという事になります。

そしてfloatは後続の他の要素にも影響が及ぶというのもポイントです。そのため footerが浮いているmainの場所に回り込んでしまっています。

解決策

単純に浮いた親要素に対してfloatを解除する命令を出せば解決します。 これにはclearfixという手法を使います。

css

上記はclearfixを使うのに必要な記述です。

一応簡潔にそれぞれどういう役割があるのかというと

content: “”; ← 疑似要素(after)の発動に必要

clear: both; ← floatの解除に必要

display: block; ← clearはblock要素にしか使えないので、clearを効かせるために必要

こんな感じです。どれか一つでも欠けると作動しなくなります。

clearfixを使ってみる

cssにclearfixを用意したらあとはhtmlに組み込むだけです。

clearfixを記述する箇所ですが、親要素ごと高さがなくなっているので、floatを使った要素の包括要素に使用します。 今回の例でいうと、mainです。

css

これで正常に画像とテキストを横に並べることができます。

floatの学習について

ここまで解説しておいて何ですが、もうfloatを使ってコーディングする事って無いかと思います。flexboxの方が自由度が高く、レスポンシブ対応も簡単です。

かといってfloatを覚える意味が全く無いかと言われると、そうとも限りません。 確かに今後WEB製作で使う機会は無いと思いますが、運用・保守業務だとまだ見かけます。

かといって時間を掛けてfloatの学習をするのも非効率的だと思いますので、大まかな仕組みを覚えておくと良いと思います。

コメント