CSS floatの使い方【floatは使わなくていい!!】
横並べといえばfloat。しかしfloatは初心者最大の難所といっていいでしょう。初心者から初級者になるための登竜門です！ぜひクリアして初級者の仲間入りしましょう！
私は地方でWebデザイナーを9年ほどやっているものです。
私もよくfloatには泣かされてきました。
しかし今ではマスターしております。
今回はCSS floatの使い方について説明します。
floatは使わなくていい！！
いきなり前提をひっくり返しますが、floatを使わなくても横並べできて絶対に崩れないCSSがあるのです。
それはdisplay:flex！
横並びさえできればいい！というかたは↓こちらの記事を参考にdisplay:flexで横並びにしてみてください。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
floatの使い方
どうしてもfloatを使わないといけないという前提でfloatの使い方を解説します。
floatには躓きやすい2つの関門があります。
- 横に並ばない
- floatの次の要素が変なところに行く
先に答えを書いておきます。
- 横に並ばない
→ width、border、padding、marginの横の合計が親の幅を超えないようにする - floatの次の要素が変なところに行く
→「親要素にoverflow: hiddenを指定する」か「横並びした要素のあとにclear:bothを指定した要素を追加する」
以下で詳しく説明します。
1.横に並ばない
横に並ばない原因がわかるように1つずつ進めていきましょう。
widthの指定
まずはwidthだけ指定してみましょう。
横に並ばない例
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%を超えたので横に並ばないわけです。
成功例
Bを70％にしました。これで30%+70%で100％。親要素の100％に収まったというわけです。
親がpx指定の場合は子要素もpx指定かcalcを使って合計値が親要素を超えないようにしましょう。
borderの指定
次に枠線（border）を指定してみましょう。
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を使います。
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です。
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を指定していない場合
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%を超えたというわけです。
成功例
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 に含まれるので崩れません。
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の指定です。
当然のように崩れます。もういいです。わかってましたから。
※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それぞれの左右を引きます。
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を使わざるを得ません。
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の次の要素が変なところに行く
失敗例
CをABの下に置こうとしたのですが、なんか崩れてしまいました。
解決方法は2つです。
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を指定した要素を追加する
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;
}まとめ
いかがでしょうか。崩れずに横並べできたでしょうか？
- 横に並ばない
→ width、border、padding、marginの横の合計が親の幅を超えないようにする - floatの次の要素が変なところに行く
→「親要素にoverflow: hiddenを指定する」か「横並びした要素のあとにclear:bothを指定した要素を追加する」
floatがクリアできれば初心者から初級者へレベルアップです！これで作れるサイトの幅が広がりますね！
以上、CSS floatの使い方でした！
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
