float解除(overflow: hidden/clear: both/clearfix)の比較と具体的な使い方

floatプロパティを利用することでブロックレベル要素の横並びを実現できます。floatを利用する際はfloatの解除をおこなう必要があります。

今回はfloatの解除方法としていくつかパターンを紹介します。

今回利用するサンプルコード

float解除をしていないサンプルコードは以下の通りです。

<div class='item1'>左よせ（float left）</div>
<div class='item2'>左よせ（float left）</div>
<div class='item3'>下（floatを解除したい要素）</div>

.item1 {
  background: yellow;
  width: 150px;
  height: 100px;
  float: left;
}

.item2 {
  background-color: lightblue;
  width: 150px;
  height: 100px;
  float: left;
}

.item3 {
  background-color: red;
  width: 400px;
  height: 200px;
}

See the Pen float-without-clear by Toshiharu Nishina (@nishina555) on CodePen.

赤色の要素を黄色と水色の下に配置したかったのですが、floatの解除をしていないためfloatを適用している黄色と水色の要素の下にもぐりこむ形になってしまっています。 今回は、赤色の要素を下に配置させるためのfloat解除方法をいくつか紹介します。

floatを解除する方法

以下ではそれぞれの方法について紹介します。

方法1: floatを解除したい要素にclearプロパティを適用する

clearプロパティとはfloatを解除する際に利用するプロパティです。

float: leftの解除はclear: left、float: rightの解除はclear: rightで行います。clear: bothで左右両方のfloat解除ができます。

左右ともfloatを解除しても問題はないため、clear: bothを使うのが無難です。

clearプロパティを利用したfloat解除の具体例

赤い要素がfloatを解除したい対象のため、赤い要素に関するCSSにclearプロパティを追加します。

<div class='item1'>左よせ（float left）</div>
<div class='item2'>左よせ（float left）</div>
<div class='item3'>下（floatを解除したい要素）</div>

.item1 {
  background: yellow;
  width: 150px;
  height: 100px;
  float: left;
}

.item2 {
  background-color: lightblue;
  width: 150px;
  height: 100px;
  float: left;
}

.item3 {
  background-color: red;
  width: 400px;
  height: 200px;
  clear: both;
}

See the Pen float-with-clear by Toshiharu Nishina (@nishina555) on CodePen.

方法2: float要素の親要素に『overflow: hidden』を適用する

【CSS】overflowの概要と具体例で紹介した通り、overflow: hiddenは要素からはみ出したコンテンツを非表示にする役割がありますが、今回のようにfloat解除の役割でも利用できます。

overflow: hiddenを付与した親要素でfloat要素を囲むことでfloat要素分の高さが確保されるため、要素（ここでいう赤の要素）がfloatを適用した要素（ここでいう黄色と水色の要素）の下に潜り込まなくなります。

今回の場合ですと、黄色と水色の要素を囲む親要素を新たに作成し、その親要素に対してoverflow: hiddenを適用します。

<div class='parent'>
  <div class='item1'>左よせ（float left）</div>
  <div class='item2'>左よせ（float left）</div>
</div>
<div class='item3'>下（floatを解除したい要素）</div>

.parent {
  overflow: hidden;
}

.item1 {
  background: yellow;
  width: 150px;
  height: 100px;
  float: left;
}

.item2 {
  background-color: lightblue;
  width: 150px;
  height: 100px;
  float: left;
}

.item3 {
  background-color: red;
  width: 400px;
  height: 200px;
}

See the Pen float-with-overflow by Toshiharu Nishina (@nishina555) on CodePen.

方法3: float要素の親要素にclearfixと呼ばれる手法を適用する

clearfixとは擬似要素にclearプロパティを適用する手法のことをいいます。

clearfixはテクニックの総称であり、clearやoverflowのようにCSSのプロパティ名ではありません。

float要素を囲んだ親要素を作成し、親要素の擬似要素に対してclearfix適用させることでfloatの解除ができます。

<div class='parent'>
  <div class='item1'>左よせ（float left）</div>
  <div class='item2'>左よせ（float left）</div>
</div>
<div class='item3'>下（floatを解除したい要素）</div>

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

.item1 {
  background: yellow;
  width: 150px;
  height: 100px;
  float: left;
}

.item2 {
  background-color: lightblue;
  width: 150px;
  height: 100px;
  float: left;
}

.item3 {
  background-color: red;
  width: 400px;
  height: 200px;
}

See the Pen float-with-clearfix by Toshiharu Nishina (@nishina555) on CodePen.

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

参考資料

• CSS設計完全ガイド ～詳細解説＋実践的モジュール集
• 【初心者向け！】CSS floatプロパティを図解で分かりやすく解説！