CSSのfloatで要素を横並びにする方法

今回はCSSのfloatプロパティについて解説していきます。

WEB制作の現場でも使用する事が非常に多いので必ずマスターしておきましょう。

floatプロパティを使いこなせる様になると以下の様に簡単に要素横並びに出来ます。

floatで要素を横並びにする方法

floatプロパティは浮動化を意味します。例えば値をleftと指定すれば左詰めに、rightと指定すれば右詰めになります。

以下の画像はfloatプロパティを使わずに要素を並べた絵です。

上記のHTMLとCSSは以下です。

▼基本となるHTML

<div class="red">赤色</div>
<div class="blue">青色</div>
<div class="yellow">黄色</div>

▼floatプロパティを使ってないCSS

.red {
  border: solid 1px #ff0000;
  background: #ff0000;
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.blue {
  border: solid 1px #0000ff;
  background: #0000ff;
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.yellow {
  border: solid 1px #ffff00;
  background: #ffff00;
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

float: leftを追加すると以下の様に要素が左詰めになります。

▼左詰めのCSS

.red {
  border: solid 1px #ff0000;
  background: #ff0000;
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  float: left;  /*追加*/
}
.blue {
  border: solid 1px #0000ff;
  background: #0000ff;
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  float: left;  /*追加*/
}
.yellow {
  border: solid 1px #ffff00;
  background: #ffff00;
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

反対に全てをfloat: rightとすれば右側にレイアウトが詰まってくれます。

▼右詰めのCSS

.red {
  border: solid 1px #ff0000;
  background: #ff0000;
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  float: right;　/*追加*/
}
.blue {
  border: solid 1px #0000ff;
  background: #0000ff;
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  float: right;  /*追加*/
}
.yellow {
  border: solid 1px #ffff00;
  background: #ffff00;
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  float: right;  /*追加*/
}

余計な回り込みを解除したい

先ほどの左詰めのCSSコードをよく見ると黄色ブロックの部分にfloat: left;の記述はありません。
その場合、普通に考えたら以下の様なレイアウトになると思うのですがfloatプロパティの特性として上に回り込んでしまう場合がよくあります

黄色部分の勝手な回り込みを解除したい場合は以下のclear: left;を使用します。

clear: left;

CSSに書くと以下の様になります。

.red {
  border: solid 1px #ff0000;
  background: #ff0000;
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  float: left;
}
.blue {
  border: solid 1px #0000ff;
  background: #0000ff;
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  float: left;
}
.yellow {
  border: solid 1px #ffff00;
  background: #ffff00;
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  clear: left; /*回り込み解除*/
}

親要素にもfloatは効きます

また親要素にも子要素にもfloatプロパティは使う事が出来ます。

以下の絵では2つの親要素とそれぞれの子要素にもfloatプロパティで左詰めにしたレイアウトです。
（グループ1＝赤、青、黄色。　グループ2＝緑、紫、黒）

実際のCSSの記述は以下のとおりです。

.group1 { /*親要素*/
  float: left;
}
.red {
  border: solid 1px #ff0000;
  background: #ff0000;
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  float: left;
  margin: 10px;
}
.blue {
  border: solid 1px #0000ff;
  background: #0000ff;
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  float: left;
  margin: 10px;
}
.yellow {
  border: solid 1px #ffff00;
  background: #ffff00;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  clear: left;
}
.group2 { /*親要素*/
  float: left;
}
.green {
  border: solid 1px #008000;
  background: #008000;
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin: 10px;
  float: left;
}
.purple {
  border: solid 1px #800080;
  background:#800080;
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin: 10px;
  float: left;
}
.black {
  border: solid 1px #000000;
  background: #000000;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin: 10px;
  clear: left;
}

以上が「CSSのfloatで要素を横並びにする方法」でした。
今回はdivの要素を作成して紹介しましたがリストタグ(ul/li)で親子グループを作成しても同じ事が可能です。

floatプロパティはWEB制作の現場では当たり前の様に使われるので必ず覚えておきましょう。