webに興味を持ち始め、自分でHTMLとCSSを勉強し始めていたころ、最初にぶつかったのはfloatでした。レイアウトを組むためにfloatはよく使われるので、最初に段組レイアウトを覚えるためには必須のプロパティではないでしょうか。これが最初はおもったような表示にならず、苦労したものです。そして、そうやって勉強を進めていく中で色々なウェブサイトをみていたらclearfixというものが出てきました。最初はこのclearfixが理解できず、どういう風に使うものかわかりませんでした。笑われてしまうかもしれませんがclearfixはCSSのプロパティかなにかだと思っていたんですね。（笑）後々floatをclear（解除）するためによく使われるテクニックでそれを使うためのclassの名称だと知りました。（このclassの名称という表現が正しいかはわかりませんが）そこで今回は同じような思いをしている方もいるかもしれないので参考になれば幸いです。

CONTENTS

• 1.floatについて
• 2.floatの配置の特性を見る
• 3.clearfix以外でfloatを解除する2つの方法
• 4.「clearfix」を使ってのfloatの解除

1.floatについて

floatプロパティはレイアウトをする際に左に寄せたり、右に寄せたりする時に使います。float（フロート）とは直訳すると「浮く」です。CSSだと「浮動化」といったりしますね。つまり、floatさせた要素は浮いた状態になります。

floatの指定値

• left 左に寄せる。後続の要素はその右に回り込みます。
• right 右に寄せる。後続の要素はその左に回り込みます。
• none 初期値

2.floatの配置の特性を見る

floatは後続の要素にも影響を与える特性があって、配置にも色々な決まりがあります。今回は例として下記のようなHTMLコードを基本に進めていきます。box1と2をcontainerで囲い、box3をフッターみたいに配置する予定です。

通常のブロックボックスの配置

通常はこのようにブロックボックスは記述した順番に縦に並びます。これから紹介する各項目でデモを用意しています。ここは必要ないとおもいますが、一応作りました。

DEMO

※デモは表示の都合上ここで紹介しているCSSとは若干異なります。

box1をfloat:leftさせた場合の配置

今度はbox1のみにfloatを適用してみます。

floatを指定する場合は必ずwidthを指定してください。

DEMO

※デモは表示の都合上ここで紹介しているCSSとは若干異なります。

このようなfloatさせた要素（box1）がある場合、box1がfloatにより浮動化となり、後続のbox2はbox1の下に潜り込んでしまいます。box2はbox1が浮いた状態なので通常あるべき場所、一番上の左に配置されています。今の状態だとbox1に隠れていて見えない状態です。どうなっているかは次の項目を見てもらうとよりわかりやすいと思います。

box1がfloatした状態でbox2の横幅がbox1の横幅より広い場合

さきほどのフロートで左寄せした場合のbox2の横幅を広くして、box2が隠れていることをわかりやすくしました。青色がbox2です。

DEMO

※デモは表示の都合上ここで紹介しているCSSとは若干異なります。

これでbox1の下に潜り込んで隠れていたことがわかります。さらにデモを見てもらうとわかるように、box2に入っているテキストはbox1の下に潜り込んでいません。この場合テキストは下に回り込まずに通常通り見ることができます。これはフロートの特性で、「行ボックスの間にフロートされている要素がある場合は幅が縮まる場合ある」というルールがあります。なのでそのルールからbox2の幅が1000pxあったとしても行ボックスであるテキストはその幅いっぱいに広がらず、前にあるフロートされた要素を避けたような表示になります。

box1とbox2をfloatさせた2段組レイアウト

box1とbox2をfloatさせた2段組レイアウトをつくってみました。この場合はbox1とbox2の親要素であるcontainerはfloatされていない通常の要素なので、box2にもfloatを適用したことにより、高さを失います。（高さを指定していない場合）そしてcontainerの後続要素box3はcontainerの下にある要素なので、通常あるべき場所、containerの下に配置されます。なのでbox1と2の下に隠れて見えなくなっています。

DEMO

※デモは表示の都合上ここで紹介しているCSSとは若干異なります。

ここが最初の方は理解できず、なぜ親要素に背景色を指定しても表示されないのか、と疑問に思ってしまうところですね。原因は親要素が高さを失った事にあったんです。通常であれば親要素は高さを指定していなくても子要素に応じて高さが決定しますが、floatで浮いたことにより、高さを失ってしまうということですね。

3.clearfix以外でfloatを解除する2つの方法

ここまででフロートの特性が理解できました。後続の要素はフロートの影響を受けてしまうので、これを解除することが必要です。なので今度はフロートされた要素の後続要素のフロートを解除する方法をいくつか紹介したいと思います。box3を解除します。フッターなどのデザインをする時によく使われますね。

box3にclearプロパティを適用した場合

まずは、clearプロパティを使う方法です。フロートの解除のプロパティclear:bothをbox3に記述します。

DEMO

※デモは表示の都合上ここで紹介しているCSSとは若干異なります。

これでbox3がbox1と2の下にちゃんと配置されました。しかし、box3の上に余白を入れたいと思い、margin-topを30px入れていますが、反応していないみたいに見えます。これは本来box3はcontainerの下に配置されるべきもので、「clearプロパティを使った要素はフロートされた要素の下に配置される」というfloatのルールがあるためです。なのでfloatルールにのっとりclearを適用したbox3はfloatした要素の下に配置されましたが、本来containerの下なのでcontainerとbox3の間でmarginが行われているのです。解決方法としてひとつはbox1と2の高さより高いmargin-topを指定することもできますが、あまり現実的ではありません。この場合はbox1もしくは2にmargin-bottomを指定してあげることで解決できます。ここも最初はmargin-topが効かなくて悩んだのを思い出します。

containerにoverflow:hiddenを適用した場合

フロートを解除する方法としてよく使われる方法がoverflowプロパティです。フロートしている要素の親要素にこのoverflow:hiddenを指定してあげることでcontainerも高さを失わず、通常通りbox1、2の下にbox3が表示されます。さらにbox3自身にmargin-topを指定できます。しかし、overflow:hiddenは本来はみ出た要素を隠すプロパティなのではみ出したい要素がある場合は使えませんね。

DEMO

4.「clearfix」を使ってのfloatの解除

ここでようやくclearfixが出てきました。clearfixは擬似要素を使って親要素の後ろにプロパティを適用します。clearfixを指定した後の要素のfloatを解除させます。clearfixの書き方も様々だとは思いますが、ここでは簡単なコードで紹介します。contentにはなにも入れずに、display:blockを適用します。

clearfixのメリット

• 親要素にclearfixのclassを指定するだけでいいので記述が簡単
• clearを使っている要素が一目でわかるので、管理がしやすい。
  （要素自体にclearを適用するとCSSを見ないとわからない）

そして最終的に出来上がったコードです。親要素であるcontainerの部分にclearfixというclassを適用しています。

DEMO

※デモは表示の都合上ここで紹介しているCSSとは若干異なります。

以上がfloatの理解からclarfixの使い方でした。最終的にはclearfixを使った方法が一番いいのではないかと思いますが、ケースバイケースで使い分けるためにも他の方法もしっておくにこしたことをありませんね。