【CSS】float完全理解！使い方と簡単な問題解決方法をご説明！

初めまして。初投稿のryoです。
好きな動物はネコ。好きなことはエンタメ全般と料理です。
これからよろしくお願いしますm(_ _)m

それでは早速ですが、今回はcssの「float（フロート）」についてお話ししたいと思います。

そもそもfloat（フロート）って？

floatとは、要素を右や左に寄せたり横並びにしたい時などに使います。
指定した要素に他の要素を回り込ませるプロパティというわけなのです。

まずはfloatの気になる4つのプロパティを見ていきましょう！

float:left【左に寄せる】
読んで字のごとくです。
float:right【右に寄せる】
こちらもそのままの意味ですね。
float:none【floatをやめる】
これもそのままの意味で、要素を指定しない、要するに初期値ということです。
float:inherit【継承させる】
これは親要素のfloatの値を継承するという意味です。

はい、この4つがプロパティになります。
もうほとんど全部そのままですね( ˘ω˘ )

float（フロート）の使い方！

ざっとした説明はここまでにして、実際にやってみようと思います。

HTMLとCSSをこんな感じで書いてみると、

こんな風になると思います。
今回は解説なので、わかりやすいように背景に色をつけてます。

これを、「2番」の要素を「1番」の右に持っていきたいんだ！みたいな時にありますよね？
はい、そんな時にこの「float」の出番です。
CSSの動かしたい要素に「float:left;」と追加してあげるだけです。

すると、

こうなると思います。
おや？と思った方いらっしゃいますね？
そうなんですよ。「背景どこいった？」ってなりますよね。
ボックスの上部分のmarginにしか出てないんです。

親要素が消える原因は？

「float」とは浮かせるという意味です。

少しわかりにくいですが、このようなイメージになるわけです。
そうするとどうなるかというと「背景」の親要素よりも、「1番」「2番」の要素が高くなるのがわかると思います。
その結果が「背景」の親要素が高さを認識できず、「ここには何もない」と勘違いしてしまい背景が表示されないという訳です。

親要素が消えた時の解決方法は？

結果だけが早く知りたいんだ！という方のために結果から言わせていただくと、
最近主流になってきているのは「overflow:hidden」という機能を使う方法です。
やり方はとても簡単で、floatをしている要素の親要素（今回の場合「all_box」）に「overflow:hidden;」を追加してあげるだけです。

すると･･･

背景が出てきたと思います。

「overflow:hidden」のメリット
・とにかく簡単・お手軽
・HTMLを書き終わった後にも追加できる

「overflow:hidden」のデメリット
・あえてはみ出させたい要素がある場合、その要素が消えてしまう
・指定した範囲にスクロールバーがあると消えてしまう

とても便利で簡単な「overflow:hidden」ですが、デメリットにもあるように、
あえてはみ出させたい要素がある場合には使えないことです。

そんな時には、「clearfix」を使用しましょう。
こちらもやり方はとても簡単で、cssに「clearfix」というクラスを作ります。

作ったクラスを親要素（今回でいうのであれば、「all_box」）に追加してあげるだけです。

「clearfix」のメリット
・レイアウトへの影響を殆ど及ぼさない
・実装が簡単

「clearfix」のデメリット
・classを使用するのでHTMLが書き終わったあとだと、追加が少し面倒
・after領域を使用してしまう

その他にもいっそ親要素も浮かせてしまえ！という親要素も「float」をしてしまうやり方もあります。

「float」のメリット
・CSSのみの追加なので楽

「float」のデメリット
・しっかりと調整しないとレイアウトが崩れる可能性がある

まとめ

いかがでしたか？

「float」について説明しましたが、使いこなせるようになると便利な機能です。

今回初めての記事だったので上手く伝えられたか不安ですが、
これからもドンドン記事を書いていくと思うのでよろしくお願いします！ﾉｼ