【HTML5・CSS3】floatプロパティを徹底解説!

HTML5・CSS3

floatプロパティとは

floatプロパティとは、指定された要素を左や右に寄せて配置したい時に使用します。後の内容は、指定した値とは反対側に回り込みます。初心者にとって、floatプロパティはつまずきやすい所ですが、1つ1つ理解してマスターしていきましょう!

タグと要素,CSS基本文法を説明している画像

floatを理解するための事前知識(ブロックレベル要素)
リンクをコピーしました

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

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

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

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

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

ブロックレベル要素の特徴

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

コード例
リンクをコピーしました

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

html
1
2
3
4
<!--HTML-->

<p>pタグは、ブロックレベル要素ですが<span>spanタグは
インライン要素&lt;/span&gt;です。</p>
css
1
2
3
4
5
6
7
8
9
10
/* CSS */

p {
  background-color: #FF9DED;
  color: white;
  padding: 5px;
}
span {
  background-color:  #48D4AC;
}

ブロックレベル要素とインラインの説明

タグの種類
リンクをコピーしました

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

ブロックレベル要素 インライン要素
div a
li span
ul img
ol img
h1~h6 strong
table textarea

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

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

ブロックレベル要素のデフォルト値
リンクをコピーしました

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

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

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

floatプロパティの使い方
リンクをコピーしました

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

css
1
float: ;

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

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

実際に使ってみる!
リンクをコピーしました

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

html
1
2
3
4
5
6
<!--HTML-->

<div class="contents">
  <div class="left-content"></div>
  <div class="right-content"></div>
</div>
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* CSS */

.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プロパティ」を追加してみます。

floatプロパティで横並びにした見本

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* CSS */

.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に本来ある背景色はつけていません。

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

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

floatを使用して親要素の高さが0になってしまった画像

後続の要素への影響
リンクをコピーしました

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

html
1
2
3
4
5
6
<!--left-content,right-contentのみfloat指定-->
<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クラスを追加します。

html
1
2
3
4
5
6
7
8
<!--HTML-->

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

.clear {
clear: both ;←floatによる回り込みを解除する
}

[ブラウザ表示結果]
ブラウザの表示結果

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

擬似要素とは?
リンクをコピーしました

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

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

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

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

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


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

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

リンクをコピーしました

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

html
1
2
3
4
5
6
<!--HTML-->
<div class="contents">
  <div class="left-content"></div>
  <div class="right-content"></div>
</div>
<footer></footer>
css
1
2
3
4
5
6
/* CSS */
.contents::after { ←変更
  clear: both ;
  content: ''; 
  display: block;
}

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

しかし、このままでは毎回このコードを追加しなくてはいけません

専用クラスを作成して回り込み解除
リンクをコピーしました

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

html
1
2
3
4
5
6
7
8
<!--HTML-->

<div class="contents clearfix">←clearfixクラス追加
  <div class="left-content"></div>
  <div class="right-content"></div>
</div>
<footer></footer>

css
1
2
3
4
5
6
7
/* CSS */

.clearfix::after { ←変更
  clear: both ;
  content: ''; 
  display: block;
}

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

他のfloat解除方法
リンクをコピーしました

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

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

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

実際にやってみよう
リンクをコピーしました

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

[見本]
float実践コードの見本

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;
}
まとめ

floatプロパティは、要素を左や右に寄せて配置したい時に使用しますが、floatの回り込みを解除しなければレイアウトが崩れてしまうので、注意しましょう。