【CSS入門】floatについて学んで初心者脱出しよう

この記事ではCSSの「float」プロパティについて解説します。

レイアウトをする際に物凄くお世話になるプロパティで、ここでつまづくとサイトを作ることが困難になってしまうので、しっかりと理解しておきましょう。

floatとは？

要素を右に寄せたり、左に寄せたりします。

要素を横並びにしたいときに、よく使われます。

注意点

floatさせるとwidthを失い、内包する要素の幅に依存するようになるのでwidthは必ず指定します（画像の場合はブラウザが自動的に計算して配置してくれます）。

それと、positionでstatic以外の値が指定されている要素にはfloatは効きませんので注意しましょう。

floatの使い方

floatに指定できる値は以下の通りです。

横並び

普通は以下のようにブロックレベル要素は縦に並びます。

HTML

<div class="parent">
  <div class="BOX-A">BOX-A</div>
  <div class="BOX-B">BOX-B</div>
  <div class="BOX-C">BOX-C</div>
</div>

CSS

.BOX-A{
  width: 180px;
  height: 180px;
  background-color: orange;
}

.BOX-B{
  width: 120px;
  height: 120px;
  background-color: blue;
}

.BOX-C{
  width: 450px;
  height: 250px;
  background-color: yellow;
}

この縦に並んだ3つの要素全てに以下のようにfloat:leftを指定します。

すると、縦に並んだ3つの要素が左寄せの横並びになります。

CSS

.BOX-A,
.BOX-B,
.BOX-C{
  float: left;
}

回り込みの解除

上の例では3つの要素を横並びにしましたが、3つ目の要素だけfloatの指定を行わないとどのような表示になるのか見てみましょう。

CSS

.BOX-A,
.BOX-B{
  float: left;
}

floatを指定していない3つ目の要素の表示だけ先ほどと違います。なぜこのような表示になるのか。

float:leftかrightを指定された要素はフローティングボックスという特殊なボックスになった上で、左や右に寄せられます。フローティングボックスというのは浮遊、つまり浮いた状態のボックスとなり、フローティングボックス以外の要素からは存在しないものとして扱われます。

今回の場合、BOX-AとBOX-Bは浮いた状態のボックスとなっていたので、浮いたことによって出来た隙間に、BOX-Cが回り込んで（潜り込んで）しまいました。このような意図しない配置を避けるために、回り込みの解除を行う必要があり、方法は二つあります。

clearプロパティ

まず一つ目の方法は回り込ませたくない要素、つまりBOX-Cに対してclearプロパティを使う方法です。

今回、右側に回り込んでいるのを解除するので、clear:leftまたはbothを指定します。

すると、

CSS

.BOX-C{
  clear: left;
}

このように無事、解除することができました。

ただ、この方法はあまり使われず(長くなるので割愛しますが、不要なHTML要素が増えることがあったりするので・・・)、現在では解除する方法としてclearfixという手法がよく使われます。

clearfix

clearfixは簡単で、floatを指定した要素の親要素にclearfixまたはcfという解除用classを与えて、after擬似要素を使ってstyleを記述するだけです。

HTML

<div class="parent cf">
  <div class="BOX-A">BOX-A</div>
  <div class="BOX-B">BOX-B</div>
  <div class="BOX-C">BOX-C</div>
</div>

CSS

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

まとめ

この記事に書かれていることで、特に覚えておいて欲しいことは以下の3点です。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。