【HTML５・CSS３】 floatプロパティと回り込み解除を図で解説！

floatプロパティとは、指定された要素を左や右に寄せて配置したい時に使用します。要素の後には、指定した値とは反対側に回り込みます。

floatプロパティで指定した要素は、「浮いて要素の高さが認識されなくなる」という副作用があるので、初心者にとってfloatプロパティはつまずきやすい所ですが、1つ1つ理解してマスターしていきましょう!

floatプロパティの基礎情報

リンクをコピーしました

この章では、floatプロパティの基礎情報について解説します。

floatを理解するための事前知識(ブロックレベル要素)

リンクをコピーしました

floatプロパティをスムーズに理解するには、ブロックレベル要素のデフォルト値を知っておく必要があります。

ブロックレベル要素とは？

ブロックレベル要素とは、見出しや段落など文章のかたまり(ブロック)のことです。特徴は、下記の4つ挙げられますが、まとめると「横幅いっぱいまで広がり、積み木のように縦に積み上がるイメージ」です。

1. 要素の前後に改行が入る
2. 横幅いっぱいに広がる
3. ブロックレベル要素同士は、縦に並ぶ
4. 次の要素は、ブロックレベル要素の下に配置される

※divタグやpタグはブロックレベル要素です。

他にもインライン要素がありますが、強調など文章中の一部として扱われます。

コード例

リンクをコピーしました

pタグを使っている実際のコード例とブラウザの表示を見て整理しましょう。

1
2
<p>pタグは、ブロックレベル要素ですが<span>spanタグは
インライン要素&lt;/span&gt;です。</p>

1
2
3
4
5
6
7
8
p {
  background-color: #FF9DED;
  color: white;
  padding: 5px;
}
span {
  background-color:  #48D4AC;
}

タグの種類

リンクをコピーしました

主なブロックレベル要素とインライン要素のタグには、下記の種類あります。

※HTML5では、ブロックレベル要素とインライン要素の概念が無くなりましたが、スタイルは要素ではなく、CSSに全て任せることに重点を置き、スタイリングでのブロックレベル要素とインライン要素の意味は変わりません。

また、floatへの理解を深める為に、必要な事前知識になるので説明していきます。

ブロックレベル要素のデフォルト値

リンクをコピーしました

ブロックレベル要素のデフォルト値は、 下記の高さと横幅になります。ブロックレベル要素のデフォルト値がfloatを理解する上で重要になるので、この数値をよく覚えておきましょう！

• 横幅(width)・・・親要素の100%
• 高さ(height)・・・子要素の合計

特に、高さ(height)が子要素の合計というデフォルト値が重要になります。

floatプロパティの使い方

リンクをコピーしました

floatは、指定された要素を左や右に寄せて配置してくれるプロパティです。
以下のように記述します。

1
float: 値;

値の部分は以下の3つの中から入力していきます。

• none(初期値)・・・配置は指定されない
• left・・・指定した要素を左に寄せる。後に続く要素は右に回り込む
• right・・・指定した要素を右に寄せる。後に続く要素は左に回り込む

CSSについて詳しくは、CSSについて徹底解説を参考にしてください。

実際に使ってみる！

リンクをコピーしました

先ほどのブロックレベル要素の特徴を思い出してみてください。divはブロックレベル要素なので、下記のコードだと縦に並びます。

1
2
3
4
<div class="contents">
  <div class="left-content"></div>
  <div class="right-content"></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.contents {
  background-color: grey;
  width: 200px;
}

.left-content {
  background-color: yellow;
  height: 100px;
  width: 100px;
}

.right-content {
  background-color: blue;
  height: 100px;
  width: 100px;
}

縦並びではなく、横並びにしたいので「left-contentとright-contentにfloatプロパティ」を追加してみます。

1
2
3
4
5
6
7
8
9
10
11
12
13
.left-content {
  background-color: yellow;
  float: left /* 追加 */
  height: 100px;
  width: 100px;
}

.right-content {
  background-color: blue;
  float: left /* 追加 */
  height: 100px;
  width: 100px;
}

floatプロパティを追加したら、横並びにはなりましたが、contentsが見えなくなってしまいました！！これは一体どういうことなのでしょうか？

floatプロパティの副作用

リンクをコピーしました

floatは、指定した要素を左右に配置してくれる便利なプロパティですが、先ほどのcontentsが見えなくなってしまった様に、floatには副作用があります。

この辺りから初心者がつまづきやすい所になりますが、「floatの特徴」と「ブロックレベル要素のデフォルト値」を理解することで、先ほどの問題も解決することが出来ます。

floatの特徴とブロックレベル要素のデフォルト値

リンクをコピーしました

floatの特徴は、指定した要素が浮き、要素の高さが認識されなくなります。
先ほどのleft-contentとright-contentは、floatを指定する事で横並びに配置されただけの様に見えましたが、実際には、要素が浮いて高さが認識されていない状態だったのです。
※影を分かりやすくする為、contentsに本来ある背景色はつけていません。

次に、ブロックレベル要素のデフォルトの高さは「子要素の高さの合計」でした。ここでは、親要素であるcontentsはdivタグなので、ブロックレベル要素です。

そして、contentsの高さは、子要素であるleft-contentとright-contentの高さが認識されなくなった事で、0になってしまったのです。

後続の要素への影響

リンクをコピーしました

floatを指定すると浮いて高さが認識されなくなるので、その親要素の高さが０になってしまいますが、後続の要素にもその影響が出ます。contentsの後にfooterを追加して見ていきましょう。

1
2
3
4
5
<div class="contents">
  <div class="left-content"></div> <!-- floatを指定 -->
  <div class="right-content"></div> <!-- floatを指定 -->
</div>
<footer></footer><!-- 追加 -->

left-contentとright-contentの高さが認識出来ず、contentsの高さもなくなる為、後続の要素であるfooterの配置にも影響が出ます。

このままでは、レイアウトが崩れてしまいます。これを解決するためには、子要素にかかっているfloatを解除する必要があります。

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

リンクをコピーしました

floatの回り込みを解除する事で、高さが認識されレイアウト崩れを防ぐことが出来ます。この章では、float解除の代表的な方法であるclearfixの流れを解説します。

clearプロパティを使用する

リンクをコピーしました

clearプロパティとは、floatプロパティで指定した回り込みを解除してくれるプロパティです。

floatを指定した次の要素にfloat解除の為のclearクラスを追加して、clearクラスにCSSでclear:both;を指定します。

※floatが連続している場合は、最後の要素にclearクラスを追加します。

1
2
3
4
5
6
<div class="contents">
  <div class="left-content"></div>
  <div class="right-content"></div>
  <div class="clear"></div> <!-- clearクラスを追加 -->
</div>
<footer></footer>

1
2
3
.clear {
clear: both;  /* floatによる回り込みを解除する*/
}

[ブラウザ表示結果]

なんとかレイアウトを戻すことが出来ました。しかし、このままでは「毎回余分な要素とスタイルを追加しなければいけない」という問題点があります。次に擬似要素を使って、この問題点を解決していきましょう。

擬似要素で回り込みを解除する

リンクをコピーしました

ここでは、擬似要素で回り込みを解除する方法を解説します。
擬似要素とは、ある要素の一部分に対してスタイルを適用出来るようにするものです。

擬似要素(::after)で回り込み解除

リンクをコピーしました

親要素contentsに対して、先ほどのclearクラスを擬似要素(::after)に使用して指定します。

1
2
3
4
5
<div class="contents">
  <div class="left-content"></div>
  <div class="right-content"></div>
</div>
<footer></footer>

1
2
3
4
5
.contents::after {  /* 変更 */
  clear: both ;
  content: ''; 
  display: block;
}

擬似要素によって、余分な要素を当てずにfloatを解除する事が出来ました。

擬似要素を詳しくみる

リンクをコピーしました

HTMLに余分な要素を追加している問題を解決する為、擬似要素を使用します。擬似要素とは、HTMLの要素を擬似的にCSSで作成することが出来るものです。

これにより、float解除の為にHTML側で追加していた要素を代わりにCSSで作成出来るので、不要なHTMLでのコードを減らしてくれます！

ここでは、擬似要素の「::after」を使用して回り込みを解除します。::afterは、指定した要素の直後にインライン要素を挿入することが出来、::beforeは要素の直前にインライン要素を挿入することが出来ます。

下記のようにcontentプロパティを使ってインライン要素の文字列など挿入内容を指定することが出来ます。

See the Pen xNrzxB by miyajima yuya (@pikawaka) on CodePen.

擬似要素の注意点は下記の３つです。
1. contentプロパティの指定が無いと、擬似要素が表示されない
2. 擬似要素は、インライン要素です。
3. 擬似要素のコロンの数がCSS2では１つ(:after)だが、CSS3では２つ(::after)です。また、CSS3の対応ブラウザのみコロン２つ(::after)を使用することが出来ます。

専用クラスを作成して回り込み解除

リンクをコピーしました

汎用性あるコードにするために、.contents::afterで作成したコードを専用クラスに切り出します。このサンプルコードでの専用クラス名は、clearfixとします。

1
2
3
4
5
<div class="contents clearfix"> <!-- 追加 -->
  <div class="left-content"></div>
  <div class="right-content"></div>
</div>
<footer></footer>

1
2
3
4
5
.clearfix::after { /* 変更*/
  clear: both ;
  content: ''; 
  display: block;
}

*floatを使用した親クラスに対して*clearfixクラスを追加するだけで、回り込みを解除出来る様になりました。これがclearfixという代表的なfloat解除方法の仕組みです。

他のfloat解除方法

リンクをコピーしました

clearfix以外にもfloat解除方法には下記の種類あります。

• 親要素にoverflow: hidden;を指定
• 親要素にoverflow: auto;を指定

しかし、上記の方法は画面サイズが変化した場合にコンテンツが見えなくなってしまう事もあるので、使用する際は注意が必要です。

実際にやってみよう

リンクをコピーしました

left, center, rightは横並びにして、下記の見本の様にbottomは回り込みさせない様にしましょう。

[見本]

See the Pen KLmNqb by miyajima yuya (@pikawaka) on CodePen.

解答をみる

答え

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!-- HTML -->
<!--回り込み解除の専用クラスを作成して、floatを指定してる親要素に追加しましょう-->
<div class="contents clearfix">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>
<div class="bottom">bottom</div>

/* CSS */
/* 一番下に回り込み解除のクラスを作成してみましょう */
.contents {
  width: 300px;
}
/* 横並びにしたい要素にfloatを追加しましょう */
.left {
  background-color: yellow;
  float: left;
  heght: 300px;
  width: 100px;
}

.center {
  background-color: #bce2e8;
  float: left;
  width: 100px;
}

.right {
  background-color: #74e887;
  float: left;
  width: 100px;
}

.bottom {
  background-color: pink;
  height: 50px;
  width: 400px;
}

/*  回り込み解除のクラスを作成してみましょう */
.clearfix::after {
  content: '';
  clear: both;
  display: block;
}

役に立ったらSHARE♪

• twitter
• facebook
• はてブ