ホーム(記事一覧)へ

CSS floatの使い方【floatは使わなくていい!!】

横並べといえばfloat。しかしfloatは初心者最大の難所といっていいでしょう。初心者から初級者になるための登竜門です!ぜひクリアして初級者の仲間入りしましょう!

私は地方でWebデザイナーを9年ほどやっているものです。

私もよくfloatには泣かされてきました。
しかし今ではマスターしております。

今回はCSS floatの使い方について説明します。

floatは使わなくていい!!

いきなり前提をひっくり返しますが、floatを使わなくても横並べできて絶対に崩れないCSSがあるのです。

それはdisplay:flex!

横並びさえできればいい!というかたは↓こちらの記事を参考にdisplay:flexで横並びにしてみてください。

CSS display:flexで解決できること9選!

floatの使い方

さてここからはとある事情によりどうしてもfloatを使わないといけないという茨の道を行くあなたのためのコーナーです。

floatには躓きやすい2つの関門があります。

  1. 横に並ばない
  2. floatの次の要素が変なところに行く

この2つがクリアできればfloatなんてチョロいもんです!

先に答えを書いておきます。

  1. 横に並ばない
    → width、border、padding、marginの横の合計が親の幅を超えないようにする
  2. floatの次の要素が変なところに行く
    →「親要素にoverflow: hiddenを指定する」か「横並びした要素のあとにclear:bothを指定した要素を追加する」

以下で詳しく説明します。

1.横に並ばない

横に並ばない原因がわかるように1つずつ進めていきましょう。

widthの指定

まずはwidthだけ指定してみましょう。

横に並ばない例

A
B

html

<div class="floatwrap">
    <div class="A">A</div>
    <div class="B">B</div>
</div>

CSS

.floatwrap{
    overflow: hidden;
}
.floatwrap .A{
    float: left;
    width: 30%;/*ココ*/
    background: yellow;
}
.floatwrap .B{
    float: left;
    width: 80%;/*ココ*/
    background: limegreen;
}

まず、横に並べたい要素の両方にfloatをかけます。

それから横幅の指定をするのですが、上記の例で横ならびしないのはfloatがかかっている要素の横幅の合計が親の横幅を超えているからです。

上記の場合親の幅(width)が100%(指定なし)に対し、Aが30%、Bが80%で合計が110%。よって親要素の100%を超えたので横に並ばないわけです。

成功例

A
B

Bを70%にしました。これで30%+70%で100%。親要素の100%に収まったというわけです。

親がpx指定の場合は子要素もpx指定かcalcを使って合計値が親要素を超えないようにしましょう。

borderの指定

次に枠線(border)を指定してみましょう。

A
B

A,Bそれぞれに「border:1px solid #000」を追加しました。

するとさっきまで崩れていなかったのに崩れてしまいました。

これはborderの1pxが足され親の横幅を超えたためです。

1px+30%+1px+1px+70%+1px=100%+4px
(Aの左線幅)+(Aの幅)+(Aの右線幅)+(Bの左線幅)+(Bの幅)+(Bの右線幅)

解決方法は2種類あります。

引き算する

widthからborder分引き算する方法です。
calcを使います。

A
B

html

<div class="floatwrap">
    <div class="A">A</div>
    <div class="B">B</div>
</div>

CSS

.floatwrap{
    overflow: hidden;
}
.floatwrap .A{
    float: left;
    width: calc(30% - 2px);/*ココ*/
    background: yellow;
    border:1px solid #000;
}
.floatwrap .B{
    float: left;
    width: calc(70% - 2px);/*ココ*/
    background: limegreen;
    border:1px solid #000;
}

width: calc(30% - 2px)のように、本来のwidthである30%から左右の線幅の合計を引きます。

1px+(30%-2px)+1px+1px+(70%-2px)+1px=100%
(Aの左線幅)+(Aの幅-左右の線幅合計)+(Aの右線幅)+(Bの左線幅)+(Bの幅-左右の線幅合計)+(Bの右線幅)

box-sizing: border-boxを指定する

box-sizing: border-boxはwidthの中にborderとpadding(後述)を含めてしまうことができるCSSです。

A
B

html

<div class="floatwrap">
    <div class="A">A</div>
    <div class="B">B</div>
</div>

CSS

.floatwrap{
    overflow: hidden;
}
.floatwrap .A{
    float: left;
    width: 30%;
    background: yellow;
    border:1px solid #000;
    box-sizing: border-box;/*ココ*/
}
.floatwrap .B{
    float: left;
    width: 70%;
    background: limegreen;
    border:1px solid #000;
    box-sizing: border-box;/*ココ*/
}

この場合borderの幅がwidthに含まれるのでwidthの合計だけ気にすればOKです。

30%+70%=100%
Aの幅(左右の線幅合計含む)+Bの幅(左右の線幅合計含む)

paddingの指定

次にpaddinを指定してみましょう。

box-sizing: border-boxを指定していない場合

A
B

html

<div class="floatwrap">
    <div class="A">A</div>
    <div class="B">B</div>
</div>

CSS

.floatwrap{
    overflow: hidden;
}
.floatwrap .A{
    float: left;
    width: calc(30% - 2px);
    background: yellow;
    border:1px solid #000;
    padding: 10px;/*ココ*/
}
.floatwrap .B{
    float: left;
    width: calc(70% - 2px);
    background: limegreen;
    border:1px solid #000;
    padding: 10px;/*ココ*/
}

ハイ、また崩れました。いい加減にしてほしいですねぇfloatさんよぉ!

といっても勝手に直ってくれるわけでもないので直します。

paddingを追加したことでやっぱり100%を超えてしまったわけです。

1px+10px+(30%-2px)+10px+1px+1px+10px+(70%-2px)+10px+1px=100%+40px
(Aの左線幅)+(Aの左のpadding)+(Aの幅-左右の線幅合計)+(Aの右のpadding)+(Aの右線幅)+(Bの左線幅)+(Bの左のpadding)+(Bの幅-左右の線幅合計)+(Bの左のpadding)+(Bの右線幅)

さあ、だいぶ複雑になってきましたよ。ついてきてますか?

要は線幅+padding+widthの合計値が100%を超えたというわけです。

成功例

A
B

html

<div class="floatwrap">
    <div class="A">A</div>
    <div class="B">B</div>
</div>

CSS

.floatwrap{
    overflow: hidden;
}
.floatwrap .A{
    float: left;
    width: calc(30% - 2px - 20px);/*ココ*/
    background: yellow;
    border:1px solid #000;
    padding: 10px;
}
.floatwrap .B{
    float: left;
    width: calc(70% - 2px - 20px);/*ココ*/
    background: limegreen;
    border:1px solid #000;
    padding: 10px;
}

borderのとき同様widthからpadding分引きます。

計算はかなり複雑になるので省略しますが、これで左右合わせて100%になりました。

box-sizing: border-boxを指定する場合

box-sizing: border-box は padding も width に含まれるので崩れません。

A
B

html

<div class="floatwrap">
    <div class="A">A</div>
    <div class="B">B</div>
</div>

CSS

.floatwrap{
    overflow: hidden;
}
.floatwrap .A{
    float: left;
    width: 30%;
    background: yellow;
    border:1px solid #000;
    box-sizing: border-box;/*ココ*/
    padding: 10px;
}
.floatwrap .B{
    float: left;
    width: 70%;
    background: limegreen;
    border:1px solid #000;
    box-sizing: border-box;/*ココ*/
    padding: 10px;
}

計算も不要なのでおススメです。

marginの指定

ここが最後のふんばりどころ!marginの指定です。

A
B

当然のように崩れます。もういいです。わかってましたから。
※marginは見えないので親要素に色をつけました。

html

<div class="floatwrap">
    <div class="A">A</div>
    <div class="B">B</div>
</div>

CSS

.floatwrap{
    overflow: hidden;
    background: #CCC;
}
.floatwrap .A{
    float: left;
    width: 30%;
    background: yellow;
    border:1px solid #000;
    box-sizing: border-box;
    padding: 10px;
    margin: 5px;/*ココ*/
}
.floatwrap .B{
    float: left;
    width: 70%;
    background: limegreen;
    border:1px solid #000;
    box-sizing: border-box;
    padding: 10px;
    margin: 5px;/*ココ*/
}

box-sizing: border-boxを指定していない場合

widthからborderとpaddingとmarginそれぞれの左右を引きます。

A
B

html

<div class="floatwrap">
    <div class="A">A</div>
    <div class="B">B</div>
</div>

CSS

.floatwrap{
    overflow: hidden;
    background: #CCC;
}
.floatwrap .A{
    float: left;
    width: calc(30% - 2px - 20px - 10px);/*ココ*/
    background: yellow;
    border:1px solid #000;
    padding: 10px;
    margin: 5px;
}
.floatwrap .B{
    float: left;
    width: calc(70% - 2px - 20px - 10px);/*ココ*/
    background: limegreen;
    border:1px solid #000;
    padding: 10px;
    margin: 5px;
}

border、padding、marginをプラマイ0にしてwidthの30%+70%=100%の状態にします。

box-sizing: border-boxを指定した場合

box-sizing: border-boxにmarginは含まれませんのでこればっかりはcalcを使わざるを得ません。

A
B

html

<div class="floatwrap">
    <div class="A">A</div>
    <div class="B">B</div>
</div>

CSS

.floatwrap{
    overflow: hidden;
    background: #CCC;
}
.floatwrap .A{
    float: left;
    width: calc(30% - 10px);/*ココ*/
    background: yellow;
    border:1px solid #000;
    box-sizing: border-box;
    padding: 10px;
    margin: 5px;
}
.floatwrap .B{
    float: left;
    width: calc(70% - 10px);/*ココ*/
    background: limegreen;
    border:1px solid #000;
    box-sizing: border-box;
    padding: 10px;
    margin: 5px;
}

widthからmarginの左右を引き算します。
こまかい計算は省略しますが合計が100%になるようにします。

これで横並べはマスターしましたね。

width、border、padding、marginの横の合計が親の幅を超えないというのが鉄則です。

2.floatの次の要素が変なところに行く

失敗例

A
B
C

CをABの下に置こうとしたのですが、なんか崩れてしまいました。

解決方法は2つです。

親要素にoverflow: hiddenを指定する

A
B
C

ABを囲んでいる親要素にoverflow: hiddenを指定すると崩れません。

html

<div class="floatwrap">
    <div class="A">A</div>
    <div class="B">B</div>
</div>
<div class="C">C</div>

CSS

.floatwrap{
    background: #CCC;
    overflow: hidden;/*ココ*/
}
.floatwrap .A{
    float: left;
    width: calc(30% - 10px);
    background: yellow;
    border:1px solid #000;
    padding: 10px;
    box-sizing: border-box;
    margin: 5px;
}
.floatwrap .B{
    float: left;
    width: calc(70% - 10px);
    background: limegreen;
    border:1px solid #000;
    padding: 10px;
    box-sizing: border-box;
    margin: 5px;
}
.C{
    background: skyblue;
    border:1px solid #000;
    padding: 10px;
    margin: 5px;
}

htmlとCSSのコードが少なくて済むのでオススメですが、overflow:hiddenが使えないときは下記の方法があります。

横並びした要素のあとにclear:bothを指定した要素を追加する

A
B
C

clear:bothはfloatを終了させるCSSです。
htmlにも要素を追加する必要があります。

html

<div class="floatwrap">
    <div class="A">A</div>
    <div class="B">B</div>
    <div class="clear"></div><!--ココ-->
</div>
<div class="C">C</div>

CSS

.floatwrap{
    background: #CCC;
    overflow: hidden;
}
.floatwrap .A{
    float: left;
    width: calc(30% - 10px);
    background: yellow;
    border:1px solid #000;
    padding: 10px;
    box-sizing: border-box;
    margin: 5px;
}
.floatwrap .B{
    float: left;
    width: calc(70% - 10px);
    background: limegreen;
    border:1px solid #000;
    padding: 10px;
    box-sizing: border-box;
    margin: 5px;
}
.clear{
    clear: both;/*ココ*/
}
.C{
    background: skyblue;
    border:1px solid #000;
    padding: 10px;
    margin: 5px;
}

まとめ

いかがでしょうか。崩れずに横並べできたでしょうか?

  1. 横に並ばない
    → width、border、padding、marginの横の合計が親の幅を超えないようにする
  2. floatの次の要素が変なところに行く
    →「親要素にoverflow: hiddenを指定する」か「横並びした要素のあとにclear:bothを指定した要素を追加する」

floatがクリアできれば初心者から初級者へレベルアップです!これで作れるサイトの幅が広がりますね!

以上、CSS floatの使い方でした!

関連記事