【CSS基礎】floatプロパティを使用してレイアウトが崩れた時の対処方法

今回は、CSSのfloatプロパティを使用した際に起こる「レイアウトの崩れ」の対処方法を解説したいと思います。

よし

floatプロパティは便利だけど、思わぬ副作用があることを忘れないでね！

この記事の内容

解決方法
floatプロパティでレイアウトが崩れてしまう理由
「clearfix」とは

解決方法

結論を先に書いてしまうと、「clearfix」を使うことで解決できます。

具体的には、

floatプロパティで消えてしまった親要素にclearfixクラスを追記
CSSに以下のコードを追記

することで解消できます。

↓ HTMLでは親要素にclearfixクラスを追記

<div class="contents clearfix">
  <div class="left-content"></div>
  <div class="right-content"></div>
</div>

↓ CSSには以下のコードを追記

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

よし

このコードはまるっと暗記してもいいかもね！

floatプロパティでレイアウトが崩れてしまう理由

では次に、floatプロパティを用いると、なぜレイアウトが崩れてしまうのかを説明していきます。

例として、以下のようなコードを用意しました。

<body>
  <div class="contents">
    <div class="left-content"></div>
    <div class="right-content"></div>
  </div>
  <footer>
  </footer>
</body>

.contents {
  background-color: skyblue;
}

.left-content {
  height: 150px;
  width: 150px;
  background-color: red;
}

.right-content {
  height: 150px;
  width: 150px;
  background-color: blue;
}

footer {
  height: 100px;
  background-color: black;
}

ブラウザで確認すると、以下のような配置になります。

それでは「float: left;」を使って、赤の箱と青の箱を並べるように設定していきます。

.contents {
  background-color: skyblue;
}

.left-content {
  height: 150px;
  width: 150px;
  background-color: red;
  float: left;
}

.right-content {
  height: 150px;
  width: 150px;
  background-color: blue;
  float: left;
}

footer {
  height: 100px;
  background-color: black;
}

するとどうでしょう。

赤と青の箱は隣同士になりましたが、親要素である水色の箱がなくなり、かつフッターである黒の箱が上にきてしまっていますね。

なぜこのような現象が起きてしまうのでしょうか？

この理由は、言葉では説明が難しいので図を使って解説していきます。

その前に、あらかじめ覚えていて欲しいポイント２つ記載しておきます。

親要素の高さは子要素の高さ（height）の合計である
floatとは英語で「浮く」という意味である

では、見ていきましょう。

よし

なんとなく分かったかなあ。

この現象を防ぐために「clearfix」が使われます。

「clearfix」とは

「clearfix」とは、子要素が浮いてしまっても、親要素の高さを保ってくれるプロパティのことです。

再度になりますが、HTMLに「clearfixクラス」を追加し、CSSに以下のコードを追記することで高さを保つことができます。

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

よし

コードはこのまま暗記してもOKです！

after擬似要素とは、設置したクラスの後に要素を後付けするものです。（before擬似要素であれば、設置したクラスの前に要素を後付けします）
contentプロパティとは、afterによって作成された要素の中身をしているものです。afterを利用する際は必須になるので、何も表示したくない場合は値を””とします。
clearプロパティとは、floatによって無くなる要素の高さを正常に戻してくれるプロパティです。
displayプロパティとは、ブロック要素orインライン要素に変更することができるプロパティです。

では、以下のようにコードを修正してみましょう。

<body>
  <div class="contents clearfix">
    <div class="left-content"></div>
    <div class="right-content"></div>
  </div>
  <footer>
  </footer>
</body>

.contents {
  background-color: skyblue;
}

.left-content {
  height: 150px;
  width: 150px;
  background-color: red;
  float: left;
}

.right-content {
  height: 150px;
  width: 150px;
  background-color: blue;
  float: left;
}

footer {
  height: 100px;
  background-color: black;
}

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

ブラウザで確認してみると、親要素がちゃんと高さを持ちつつ、赤と青の箱が横並びになっていますね。