CSS float と clear

Volardev 編集部 April 12, 2026

1. float プロパティ

float プロパティは、要素の配置（ポジショニング）と書式設定に使用されます。例えば、画像をテキスト内の左側または右側に「浮かせて」配置し、テキストをその周囲に回り込ませることができます。

float プロパティには以下のいずれかの値を指定できます。

最も単純な使い方は、画像の周囲にテキストを回り込ませることです。

以下の例では、画像を右側に配置し、テキストをその左側に回り込ませる方法を示します。

img {
  float: right;
}

以下の例では、画像を左側に配置し、テキストをその右側に回り込ませる方法を示します。

img {
  float: left;
}

以下の例では、画像を本来表示される場所（デフォルト）に配置します。

img {
  float: none;
}

通常、ブロック要素（div など）は垂直に積み重なります。しかし、float を使用することで、要素を横に並べることができます。

.div1 {
  float: left;
  width: 33.33%;
  padding: 15px;
}

clear プロパティは、どの要素が浮いた（float した）要素の隣に配置できるか、またどの側に配置できるかを指定します。

clear プロパティには以下の値を指定できます。

clear を使用する最も一般的なケースは、要素に float を適用した後、後続の要素が回り込むのを防ぎたい場合です。

.div-after-float {
  clear: both;
}

浮いている要素がその親要素（コンテナ）よりも高い場合、その要素はコンテナの外側にはみ出してしまいます。この問題を解決するために、「Clearfix ハック」を使用します。

以前は overflow: auto; が使われていましたが、現在は以下の疑似要素（pseudo-element）を使用した手法が推奨されています。

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

float プロパティを使用すると、コンテンツのボックスを並べてグリッドを作成できます。

.box {
  float: left;
  width: 33.33%; /* 3つのボックスを横並びにする */
  padding: 50px;
}

補足:box-sizing: border-box; を併用することで、パディングやボーダーを含めた幅の計算が容易になり、レイアウト崩れを防ぐことができます。

float を利用して、複数の画像を横一列に並べるギャラリーのようなレイアウトも簡単に実装可能です。

.img-container {
  float: left;
  width: 33.33%;
  padding: 5px;
}

float は、ハイパーリンクのリストを水平なメニューとして表示する場合にも頻繁に利用されます。

ul {
  list-style-type: none;
}

li {
  float: left;
}

li a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}