【保存版】CSS float のクリア方法を完全網羅！初心者でも分かるように徹底解説

CSS float をクリアする最善の方法

float をクリアする とは、浮動要素の後に配置される要素が、浮動要素の影響を受けないようにする 処理です。

float をクリアする方法はいくつかあります。

clear プロパティを使用する

最も一般的な方法は、clear プロパティを使用することです。clear プロパティには、以下の値を指定できます。

• both: 左右両方の浮動要素の影響を受けないようにします。

例:

.container {
  width: 500px;
}

.float-left {
  float: left;
  width: 200px;
}

.clear {
  clear: both;
}

HTML:

<div class="container">
  <div class="float-left">
    これは左側に浮動する要素です。
  </div>
  <div class="clear">
    これはクリアされた要素です。
  </div>
</div>

overflow: hidden; を使用する

親要素に overflow: hidden; を指定すると、その要素内の浮動要素の影響を受けないようにすることができます。

.container {
  width: 500px;
  overflow: hidden;
}

.float-left {
  float: left;
  width: 200px;
}

<div class="container">
  <div class="float-left">
    これは左側に浮動する要素です。
  </div>
</div>

display: flow-root; を使用する

.container {
  width: 500px;
  display: flow-root;
}

.float-left {
  float: left;
  width: 200px;
}

<div class="container">
  <div class="float-left">
    これは左側に浮動する要素です。
  </div>
</div>

clearfix は、float をクリアするための擬似クラスです。clearfix を使用すると、コードを簡潔に書くことができます。

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

<div class="clearfix">
  <div class="float-left">
    これは左側に浮動する要素です。
  </div>
</div>

height を使用する

.container {
  width: 500px;
  height: 100px;
}

.float-left {
  float: left;
  width: 200px;
}

<div class="container">
  <div class="float-left">
    これは左側に浮動する要素です。
  </div>
</div>

どの方法を使用するのが最適かは、状況によって異なります。 以下に、それぞれの方法のメリットとデメリットをまとめます。

• [CSS floatの使い方を解説！3つの解除方法も完全マスター |

clear プロパティを使用する

<div class="container">
  <div class="float-left">
    これは左側に浮動する要素です。
  </div>
  <div class="clear">
    これはクリアされた要素です。
  </div>
</div>

.container {
  width: 500px;
}

.float-left {
  float: left;
  width: 200px;
}

.clear {
  clear: both;
}

overflow: hidden; を使用する

<div class="container">
  <div class="float-left">
    これは左側に浮動する要素です。
  </div>
</div>

.container {
  width: 500px;
  overflow: hidden;
}

.float-left {
  float: left;
  width: 200px;
}

display: flow-root; を使用する

<div class="container">
  <div class="float-left">
    これは左側に浮動する要素です。
  </div>
</div>

.container {
  width: 500px;
  display: flow-root;
}

.float-left {
  float: left;
  width: 200px;
}

clearfix を使用する

<div class="clearfix">
  <div class="float-left">
    これは左側に浮動する要素です。
  </div>
</div>

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

.float-left {
  float: left;
  width: 200px;
}

height を使用する

<div class="container">
  <div class="float-left">
    これは左側に浮動する要素です。
  </div>
</div>

.container {
  width: 500px;
  height: 100px;
}

.float-left {
  float: left;
  width: 200px;
}

CSS float をクリアするその他の方法

position: absolute; を使用する

子要素に position: absolute; を指定すると、親要素の基準点から絶対位置で配置することができます。

<div class="container">
  <div class="float-left">
    これは左側に浮動する要素です。
  </div>
  <div class="clear">
    これはクリアされた要素です。
  </div>
</div>

.container {
  width: 500px;
}

.float-left {
  float: left;
  width: 200px;
}

.clear {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

flexbox は、要素を柔軟にレイアウトするためのレイアウトシステムです。

<div class="container">
  <div class="float-left">
    これは左側に浮動する要素です。
  </div>
  <div class="clear">
    これはクリアされた要素です。
  </div>
</div>

.container {
  display: flex;
}

.float-left {
  float: left;
  width: 200px;
}

.clear {
  flex: 1 1 auto;
}

grid を使用する

grid は、要素を2次元グリッドレイアウトに配置するためのレイアウトシステムです。

<div class="container">
  <div class="float-left">
    これは左側に浮動する要素です。
  </div>
  <div class="clear">
    これはクリアされた要素です。
  </div>
</div>

.container {
  display: grid;
}

.float-left {
  float: left;
  width: 200px;
}

.clear {
  grid-area: 1 / 2 / span 1 / span 1;
}

以下に、それぞれの方法のメリットとデメリットをまとめます。

一般的な的には、clear プロパティを使用するのが最も簡単で安全な方法です。 ただし、コードを簡潔にしたい場合は、clearfix や flexbox などの他の方法を使用することを検討しても良いでしょう。

以下は、それぞれの方法の使用例です。

• clear プロパティ: シンプルなレイアウトで、float をクリアする必要がある場合
• overflow: hidden;: 親要素の高さを固定したい場合
• display: flow-root;: 親要素内に複数の浮動要素があり、その高さを自動的に調整したい場合
• clearfix: コードを簡潔にしたい場合
• height: 親要素の高さを固定し、その中に浮動要素を配置したい場合
• position: absolute;: 複雑なレイアウトを作成したい場合
• flexbox: 柔軟なレイアウトを作成したい場合
• grid: 2次元グリッドレイアウトを作成したい場合

**どの方法を使うべきか迷った場合は、上記のメリットとデメリットを参考に、状況