CSSのfloatプロパティを分かりやすく解説！その他の用途と代替方法もご紹介

画像の配置

float を使用して、画像をテキストの横に配置することができます。これは、記事に画像を挿入したい場合などに役立ちます。

.image {
  float: left;
  margin-right: 10px;
}

ナビゲーションバーの作成

float を使用して、水平方向に並んだナビゲーションバーを作成することができます。

#nav li {
  float: left;
  list-style: none;
}

フローティング広告の作成

float を使用して、ページの脇にフローティング広告を作成することができます。

#ad {
  float: right;
  width: 300px;
}

float を使用する際には、以下の点に注意する必要があります。

float は、古いブラウザでは正しくレンダリングされない場合があります。レイアウトを古いブラウザに対応させる場合は、flexbox や grid などの代替方法を検討する必要があります。
float を使用すると、要素が通常のドキュメントフローから外れます。つまり、float で配置された要素の下に他の要素が流れてこなくなります。これを修正するには、clear プロパティを使用する必要があります。

<div class="article">
  <img src="image.jpg" class="image">
  <p>本文</p>
</div>

.article {
  width: 600px;
}

.image {
  float: left;
  margin-right: 10px;
  width: 200px;
}

ナビゲーションバーの作成

以下のコードは、水平方向に並んだナビゲーションバーを作成する例です。

<nav>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">ブログ</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  float: left;
  padding: 10px;
}

フローティング広告の作成

以下のコードは、ページの脇にフローティング広告を作成する例です。

<div id="ad">
  <p>広告</p>
</div>

#ad {
  float: right;
  width: 300px;
  background-color: #ccc;
  padding: 10px;
}

flexbox

flexbox は、Webページのレイアウトを作成するための強力で柔軟なモジュールです。float と異なり、flexbox を使用すると、要素をさまざまな方法で配置し、サイズを変更し、整列することができます。

flexbox を使用して、画像をテキストの横に配置する方法は次のとおりです。

.container {
  display: flex;
}

.image {
  flex: 0 0 200px; /* 画像の幅を200pxに固定 */
  margin-right: 10px;
}

flexbox を使用して、ナビゲーションバーを作成する方法については、次のリソースを参照してください。

grid

grid は、Webページのレイアウトを作成するためのもう1つの強力なモジュールです。grid を使用すると、要素を行と列に配置し、さまざまな方法でサイズを変更し、整列することができます。

grid を使用して、画像をテキストの横に配置する方法については、次のリソースを参照してください。

float 以外にも、要素を横並びに配置する方法がいくつかあります。以下に、いくつかの例を示します。