「CSSのfloatが上手く使えない」「回り込みのレイアウトが崩れてしまう」

そんな悩みを抱えていませんか？

floatを使って要素を回り込ませることは簡単ですが、機能を理解していないと、レイアウトが崩れてしまいますよね。

今回は、CSSのfloatを使った回り込みをマスターしたい、という方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSのfloatを使って要素を回り込ませる方法が分かるようになりますよ。

ぜひ最後まで読んでくださいね！

floatプロパティってどんなもの？

floatは、要素を回り込ませて、横に配置させるためのプロパティです。

HTMLでブロック要素を続けて記述した場合、要素は縦に並びます。

<div class="box01">ボックスの中身</div>
<div class="box02">ボックスの中身</div>

ここにfloatを用いることで要素を横並びにすることができます。

複数の要素の横並びにする実装は、Flexboxでできてしまうので、floatを使用しているサイトはあまり見かけないかもしれません。

ただ、画像にテキストを回り込ませるなど、floatの方が手軽にできる実装があります。

覚えておくと役に立つでしょう。

floatプロパティの使い方

floatプロパティには3つの値があります。

leftとrightで寄せる位置と回り込み方法を指定しています。

floatを使って、要素を並べる方法とテキストを回り込ませる方法を解説していきますね。

要素を横並びにする

2つのブロック要素を横並びにする方法を紹介します。

<div class="float-box">1つ目の要素</div>
<div class="float-box">2つ目の要素</div>

横並びにする要素にクラス名を追加し、CSSでfloatの指定をします。

.float-box {
  width: 200px;
  height: 200px;
  margin:10px;
  background: #ccc;
  float: left;
}

「float: left」を指定し、1つ目の要素と2つ目の要素を横並びにしています。

並んでいる表示を分かりやすくするために、marginで余白を挿入し、backgroundで背景色を設定しています。

テキストを回り込ませる

画像を右側に寄せて、テキストを左側に回り込みさせる方法を紹介します。

<img src="sample06.jpg">
<p>こちらのテキストは、回り込みせず、下に配置されます。</p>
<img src="sample07.jpg" class="float">
<p>こちらのテキストは、回り込みをして画像の左側に配置されます。</p>

画像の片方にクラス名を記述し、CSSで「float: right」を指定します。

.float {
  margin-right: 10px;
  margin-bottom: 10px;
  float: right;
}

1つ目の画像とテキストは、上下に配置されます。

対して、2つ目の画像は右側に寄せられて、テキストが左側に回り込みます。

テキストが長い場合は、画像の下に回り込んで続きますね。

画像とテキストの間をあけるためにmarginを指定しています。

floatの回り込みを解除する方法

floatを指定した要素は浮いた状態になるため、高さが計算されなくなります。

それにより、後に続く要素が位置を詰めてくるので、要素同士が重なってしまいます。

後の要素が影響を受けないように、 floatの回り込みを解除する必要があります。

回り込みを解除する方法を2つ紹介します。

clearfixを使う

後に続く要素にclearプロパティを指定することで、floatの回り込みを解除できます。

このclearプロパティを疑似要素に指定する方法をclearfixといいます。

<div class="clearfix">
<div class="float-box">1つ目の要素</div>
<div class="float-box">2つ目の要素</div>
</div>
<div>3つ目の要素:ここではfloatが解除されています。</div>

CSSは以下のように記述します。

.float-box {
  width: 200px;
  height: 200px;
  margin:10px;
  background: #ccc;
  float: left;
}
.clearfix {
  background: skyblue;
  padding: 10px;
}
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

疑似要素のafterを使用してfloatを解除しています。

解除した後の3つ目の要素は、回り込みをせずに表示されますね。

疑似要素に書かれたcontentプロパティは、afterやbeforeなどの疑似要素に文字や画像などのコンテンツを追加するときに使います。

疑似要素のafterが他に使用できなくなるデメリットはありますが、レイアウトを崩す心配がなくなる方法なので、floatの解除にはおすすめです。

overflowプロパティを使う

基本的には、先ほどのclearfixの方法を推奨しますが、clearfixを使えないときのためにもう一つの方法を紹介します。

overflowを使用する方法です。

overflowは、要素からはみ出した部分をどう表示するのかを指定するプロパティです。

<div class="content">
<div class="float-box">1つ目の要素</div>
<div class="float-box">2つ目の要素</div>
</div>
<div>3つ目の要素:ここではfloatが解除されています。</div>

CSSは以下のように記述します。

.float-box {
  width: 200px;
  height: 200px;
  margin:10px;
  background: #ccc;
  float: left;
}
.content {
  background: skyblue;
  padding: 10px;
  overflow:auto;
}

float-boxのCSSは、前回と同様です。

floatした要素の親要素にoverflowを指定しています。

overflowを使用した要素の高さの計算には、中にある子要素の高さも追加されるため、後に続く要素が位置を詰めてくることがなくなります。

値は、「overflow: visible」以外であれば、このように機能します。

ただし、overflowは、はみ出した要素をスクロールで表示したり、削除したりを行うプロパティです。

レイアウトに影響を与える可能性が高いため注意が必要ですね。

まとめ：floatとFlexboxを使い分けよう

今回は、CSSのfloatを使って要素を回り込みさせる方法を紹介してきました。

clearfixやoverflowプロパティを使って、floatを解除する方法もお伝えしましたね。

Flexboxが生まれたことで使う機会が減りましたが、テキストの回り込みには便利なプロパティです。

要素の回り込みをさせたいときに、今回の記事が参考になれば幸いです。

＼プログラミングスクールを比較／