【CSS】float（フロート）の使い方と解除方法を現役コーダーが解説

今回はツイッターで思ったより反響がありましたのでfloat（フロート）についてを解説していこうと思います。
難しいとよく耳にしますが理解すると意外と簡単ですよ。

そもそもfloat（フロート）とは

そもそもfloat（フロート）とはどういうスタイルなんでしょうか。
英語での直訳は「浮く」になります。

喫茶店やレストランにいってコーラ（メロンソーダ）フロートを頼むとアイスやクリームが上に乗って（浮いて）ますよね。
横から見ると氷（泡）やらがぷかぷか横一列に浮いてるのがわかると思います。（正確には違うかもですが）

それと一緒で「要素を横1列並び」に出来るCSSになります。

簡単にプロパティの説明をしておきます。
他のCSSと同じで下記のように書きます。

.sample {
  float: 〇〇〇;
}

〇〇〇の部分はやりたい処理にによって変わります。

left	要素を左寄せにする
right	要素を右寄せにする
none	初期値になります。リセットしたいとき使います。

※noneは普通に組む分には使わないので今は気にしないでOK。

使い方

では、どういう時float（フロート）を使うのでしょうか。
基本的には横一列に並べたいときに使います。

    <div class="test">
      <div class="box1"><span>aaa</span></div>
      <div class="box2"><span>bbb</span></div>
      <div class="box3"><span>ccc</span></div>
      <div class="box4"><span>ddd</span></div>
    </div>

なぜ解除が必要か

実際に見せたほうが早いので下記をご覧ください。
float（フロート）させて解除させないと下記のように隙間がある場合は間に入り込んでしまうのです。

    <div class="test">
      <div class="box1"><span>aaa</span></div>
      <div class="box2"><span>bbb</span></div>
      <div class="box3"><span>ccc</span></div>
      <p>次の要素次の要素次の要素次の要素次の要素次の要素次の要素</p>
    </div>

      .test {
        width: 100%;
      }
      .test * {
        box-sizing: border-box;
      }
      .test .box1 {
        float: left;
        width: 25%;
        height: 100px;
        background: #ff0000;
      }
      .test .box2 {
        float: left;
        width: 25%;
        height: 100px;
        background: #00ff00;
      }
      .test .box3 {
        float: left;
        width: 25%;
        height: 100px;
        background: #0000ff;
      }
      .test span {
        background: #fff;
      }

box1,box2,box3がfloat（フロート）の記述がるのであるので、次のpタグで解除させたらどうなるでしょうか。

    <div class="test">
      <div class="box1"><span>aaa</span></div>
      <div class="box2"><span>bbb</span></div>
      <div class="box3"><span>ccc</span></div>
      <p style="clear:both;">次の要素次の要素次の要素次の要素次の要素次の要素次の要素</p>
    </div>

崩れなくレイアウトできましたね。
解除が必要な理由がわかったと思います。

※分かりやすいように直書きで今回は記載しています。
実際にやる場合は直書きではなく、スタイルシートに書いてくださいね。

解除のやり方

それでは解除のやり方を解説していきます。
私が知っている簡単なやり方は3つあります。

clear:both;を指定する

直前までの回り込みを解除する一般的な記述方法になります。
前述で紹介したやり方になります。
float（フロート）を使った直後に設定することでfloat（フロート）を解除することができます。

    <div class="test">
      <div class="box1"><span>aaa</span></div>
      <div class="box2"><span>bbb</span></div>
      <div class="box3"><span>ccc</span></div>
    </div>
    <p style="clear:both;">次の要素次の要素次の要素次の要素次の要素次の要素次の要素</p>

次の要素次の要素次の要素次の要素次の要素次の要素次の要素

親要素にclearfixを指定する

float（フロート）を解除するCSSテクニックになります。
クリアフィクスと呼びます。こちらはコードを書いている方ならよく見る手法かもしれません。
こちらは親要素に指定するとfloat（フロート）問題を解決できるという便利なテクニックです。
どういう仕組みで動いているかといいますと、親要素内の最後に擬似的に子要素を作り出して、clear:both;を指定してfloat（フロート）を解除しています。
やり方としては上記の記述を一緒ですね。

    <div class="test clearfix">
      <div class="box1"><span>aaa</span></div>
      <div class="box2"><span>bbb</span></div>
      <div class="box3"><span>ccc</span></div>
    </div>
    <p>次の要素次の要素次の要素次の要素次の要素次の要素次の要素</p>

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.clearfix{ zoom: 1; }

次の要素次の要素次の要素次の要素次の要素次の要素次の要素

親要素にoverflow:hidden;を指定する

こちらもクリアフィクスと同じで親要素に指定するだけで解除できます。

    <div class="test ovh">
      <div class="box1"><span>aaa</span></div>
      <div class="box2"><span>bbb</span></div>
      <div class="box3"><span>ccc</span></div>
    </div>
    <p>次の要素次の要素次の要素次の要素次の要素次の要素次の要素</p>

次の要素次の要素次の要素次の要素次の要素次の要素次の要素

私はこちらをよく使います。ただデメリットもありますので注意が必要です。
はみ出した部分が非表示になる指定なのでpositionを使ってはみ出したデザインなどは、隠れてしまう可能性が出てきますので解除方は使い分けで対処するといいと思います。

応用編

下記のようにわざと回り込ませたまま使うこともできます。
ブログなどでよく見るレイアウトかもしれません。

まとめ

float（フロート）について解説してきましたが、どうでしょう少しは苦手意識は薄らいだでしょうか。

実際にfloat（フロート）を使うとなる場面としては、テキストリンクが横1列に並んでいるデザインや要素がずらーっと並ぶデザインの時に使えると思います。
ただ、今はフレックスボックスという新たな選択肢もあるため、無理して使う必要はないかと思います。

制作会社に入って、既存のサイトでフローが使われていて調整する場面があるかもしれません。
その時に今回紹介した内容が参考になれば幸いです。

もっとよく知りたいと思った方はコメントでもツイッターに返信でもいいので是非お気軽にご相談ください。

ではまた。