ここでは、floatプロパティの使い方についてお話していきます。このページを読み終わるころには、写真とテキストを横に配置したこんなレイアウトが完成できるようになります。
こんな形でテキストと画像を横並びに配置したいときってありませんか？
これは左の画像にfloat:left;、右のテキストにfloat:right;を設定した例です。ここでは最終的にこのレイアウトができることを目指します。
floatの反映が終わった後は、後続のテキストが余計な回り込みをしないようにfloat解除をします。
コンテンツ
要素を横に並べる「floatプロパティ」の基本
floatプロパティは、回り込みを指定するプロパティです。ある要素がfloat:right;を指定されるとその要素は右に寄り後続の要素が左に回り込みます。反対にfloat:left;を指定されると指定された要素は左に寄り後続の要素が右に回り込みます。
「float」とは英語で「浮く」という意味です。イメージとしては水に浮いた要素が右に流れたり、左に流れたりしていると考えてください。
floatプロパティの特徴
- float:right;もしくはfloat:left;と指定された要素が右もしくは左に寄る。
- 後続する要素はまわり込み続ける。
- floatは要素が浮いているのでfloatが効いた要素は「高さ」がなくなる。
- floatが効いた子要素の高さに依存していた親要素も高さを失う。
- まわり込みを解除するには後続の要素に
clear:both;を指定する。 - 横に並べるには幅の合計が親要素の幅に収まるサイズでなければいけない。
それでは順番に見ていきましょう。最初に完成形をご覧ください。
ボタンで表示を切り替えてご覧ください。
See the Pen float03 – clearfix by kenichi (@ken81) on CodePen.
赤い要素がfloat:right;、青い要素がfloat:left;です。float前のテキストと赤と青の要素がラップされていて背景に緑色が指定されています。float後のテキストも配置もちゃんとしています。まずはこの形を作ります。
背景切れと後続のテキストがまわり込みを起こした例
See the Pen float01 by kenichi (@ken81) on CodePen.
CSS
.float-right{
float: right;
background: #FBCDE4;
}
.float-left{
float: left;
background: #CDE4FB;
}
.wrap{
background: #E4FBCD;
}
まずは、float:right;とfloat:left;を指定しただけの状態からはじめてみましょう。floatの効いた要素の高さが認識されないためfloat部分に背景色が反映されていません。また、float後のテキストがまわり込んでいます。これらの問題はすべてfloatが終わったあとで「float解除」をしていないことが原因です。ここではfloat解除の代表的な３つの方法をご紹介します。
解決策１：空要素にclear:both;を指定する方法
See the Pen float02 by kenichi (@ken81) on CodePen.
HTML
<div class="wrap">
<p>float前のテキストです。
</p>
<div class="float-right">
<p>「float:right;」です。</p>
</div>
<div class="float-left">
<p>「float:left;」です。</p>
</div>
<div class="clear"></div>
</div>
<p>float後のテキストです。</p>
CSS
.float-right{
float:right;
background:#FBCDE4;
}
.float-left{
float:left;
background:#CDE4FB;
}
.wrap{
background:#E4FBCD;
}
.clear{
clear:both;
}
これはfloatの後に「clear」というクラス名の入った空divを入れてclear:both;を指定したものです。floatが解除されたので空divまで高さが有効になり、背景色が反映されました。後続の要素もまわり込んでいません。この方法は初心者の方にもっとも理解しやすい方法ですが、余計なdiv要素を入れなければいけないところがデメリットとなります。
解決策２：clearfixを使う
clearfixというのはこのfloat解除法に付けられた通称です。
See the Pen float03 – clearfix by kenichi (@ken81) on CodePen.
HTML
<div class="wrap clearfix">
<p>float前のテキストです。
</p>
<div class="float-right">
<p>「float:right;」です。</p>
</div>
<div class="float-left">
<p>「float:left;」です。</p>
</div>
</div>
<p>float後のテキストです。</p>
CSS
.float-right{
float: right;
background: #FBCDE4;
}
.float-left{
float: left;
background: #CDE4FB;
}
.wrap{
background: #E4FBCD;
}
.clearfix:after{
display: block;
clear: both;
content: "";
}
先ほどは、floatを解除するために空divを入れましたが、今回はfloatの後に疑似要素をいれてclear:both;を指定しました。floatが効いた要素の親要素にこの指定をします。私が個人的におすすめするfloat解除がこれです。とりあえず、float解除で困ったらこのコードをコピペして使ってください。
See the Pen float04 – overflow by kenichi (@ken81) on CodePen.
CSS
.float-right{
float:right;
background:#FBCDE4;
}
.float-left{
float:left;
background:#CDE4FB;
}
.wrap{
background:#E4FBCD;
overflow: hidden;
}
先ほどと同じようにfloatが効いた要素の親要素にoverflow:hidden;を設定するとfloatが解除されるという不思議な例です。これは、overflowプロパティの値に「visible」以外を指定すると、子要素の高さが親要素に反映されるという性質を利用しています。
この方法は、一番シンプルな方法ですが、overflow:hidden;というプロパティ自体が後々、他のトラブルを生じる可能性があるので豆知識くらいの感じで覚えておいていただければ良いかと思います。
以上、３つのfloat解除法をご紹介しました。
それでは、実際に最初にご覧いただいたこれを作ってみましょう。
floatプロパティが効かない例
See the Pen float06 by kenichi (@ken81) on CodePen.
HTML
<div class="wrap">
<div class="float-left">
<img src="https://cotodama.co/wp-content/uploads/2017/11/158314167-300x200.jpg"/>
</div>
<div class="float-right">
<p>floatプロパティをちゃんと設定しているはずなのに並んでくれない例です。実は、floatが指定されたボックスが横に並ぶためには、もうひとつ条件がありました。
</p>
</div>
</div>
CSS
.float-right{
float:right;
}
.float-left{
float:left;
}
.wrap:after{
display:block;
clear:both;
content:"";
}
実際にfloatを使ってみたら横に並んでくれなくなってしまいました。これは何が悪いのでしょうか？実は、floatの要素が横に並ぶためには子要素の横幅の合計が親要素の横幅よりも小さくなければいけません。floatを設定する際は、合わせてサイズも指定することをお忘れなく。
See the Pen float by kenichi (@ken81) on CodePen.
CSS
.float-right{
float:right;
width:50%;
}
.float-left{
float:left;
width:50%;
}
.wrap:after{
display:block;
clear:both;
content:"";
}
それぞれの２つの子要素にそれぞれwidth:50%;を設定したら、ちゃんと横に並んでくれました。以上がfloatプロパティを使って写真とテキストを横に並べる方法でした。
floatプロパティの注意点まとめ
- floatを指定したら解除することを忘れないこと。
- 解除は親要素にclearfixがオススメ。
- 横に並べる要素のサイズ指定もお忘れなく。
floatを使わない方法
最後に、新しいプロパティ「flexbox」というのをご紹介して終わりにしたいと思います。
See the Pen flexbox by kenichi (@ken81) on CodePen.
CSS
.wrap{
display:flex;
flex-wrap:nowrap;
justify-content:space-between;
}
.item+.item{
margin-left:1.0em;
}
スタイルシートはこんな感じになっています。floatプロパティを使うのに比べてスタイルシートもシンプルですね。
See the Pen flexbox02 by kenichi (@ken81) on CodePen.
CSS
.wrap{
display:flex;
flex-wrap:nowrap;
justify-content:space-between;
flex-direction:row-reverse;
}
.item+.item{
margin-left:1.0em;
}
余白を少し調整しましたが、基本的にプロパティをひとつ指定するだけで左右の入れ替えが可能です。
flexboxはちゃんと使えるようになれば結構いろいろできるようになります。今後はflexboxを使うのが主流になってくると思いますので、ぜひチェックしてみてください。
以上、最後までお読みいただきありがとうございました。
