【CSS】floatプロパティの使い方をコードと図で詳しく解説!

2019年7月15日

今回は、CSSのfloatプロパティの使い方を紹介します。

コードと効果を具体的に解説していきますので、ぜひ最後まで読んでください。

 

floatプロパティとは?

floatプロパティは、箇条書きの項目を横に並べたり、画像の周りに文字を回り込ませたりする時に使います。

サイトのサイドバーもfloatを使っていることが多いです。

 

floatプロパティの指定方法

floatプロパティの書式 効果
float: left; 要素を左に配置
float: right; 要素を右に配置
float: none; floatなし(初期値)

 

floatプロパティの適用例

では、floatを適用したときの効果を見ていきましょう。

 

2枚の画像

幅120pxの画像2枚を幅250pxの空間に置いています。

下はfloat無しの状態。WordPressでは、2枚の画像は縦に並びます。

See the Pen
FLOAT
by おじさん (@ozsanblog)
on CodePen.

コードは右上のCodePenのロゴをクリックすると自由に編集できます
うさぎ

 

2枚の画像の間に余白を設けて、横並びにしていきます。

下段の画像(pic2)にfloat: rightを適用します。

これで横並びになりそうな気がしますが、結果は下のように横にずれるだけです。

See the Pen
RzOYgx
by おじさん (@ozsanblog)
on CodePen.

 

上段の画像(pic1)の右側は真っ白ですが、見えないブロックが存在します。そのため、下段の画像(pic2)が上がれないんですね。

WordPress5以降のGutenbergを使っている方は、理解しやすいと思います。

僕も最初にfloatを勉強したときに「浮かす」と説明を聞いたんですが、その意味がよく分かりませんでした。

float=「ブロックを消す」と解釈して、ようやく理解できました。

 

ということで、pic1もfloatさせれば問題は解決します。

See the Pen
pic1-2 float
by おじさん (@ozsanblog)
on CodePen.

 

ちなみに、ぴったりくっつける場合はpic1にfloat: leftを適用すればpic2が上に流れ込むので、横並びになります。

pic1にfloat: rightを適用した結果も試してみてください。

 

画像と文字

画像をfloatさせると、文字が画像の横に流れ込みます。

See the Pen
テキスト
by おじさん (@ozsanblog)
on CodePen.

おじさん
「文字の回り込み」というやつですね

 

「文字の回り込み」は、2つのパターンを使い分けてください。

  • 画像の周り全体にテキストが流れ込むパターン
  • 画像の横にだけテキストが流れ込むパターン

画像の横にだけテキストが流れ込むパターンは、親要素にoverflow:autoを指定します。

See the Pen
float-overflow
by おじさん (@ozsanblog)
on CodePen.

 

文字と文字

文字のfloatは、グランドメニューなどで使われます。

例として箇条書きで縦に並んだボタンを3つ、floatを使って横並びにします。

See the Pen
float ul
by おじさん (@ozsanblog)
on CodePen.

箇条書きの黒い丸は list-style: none; で消せます。

また、margin-right: 10px; などでボタン同士の間を開けてください。

CSS#button ul li {
float: left;
list-style: none;
margin-right: 10px;
}

 

floatプロパティの解除

次のような場合、メインカラムとサイドバーをfloatさせると困ったことが起きます。

See the Pen
jjJBaO
by おじさん (@ozsanblog)
on CodePen.

 

メインカラムをfloat: left、サイドバーをfloat: rightと指定すると、メインカラムとサイドバーのブロックが無くなるので、フッターが回り込んでしまうんですね。

See the Pen
float-site-2
by おじさん (@ozsanblog)
on CodePen.

そこで、floatを解除する必要が生じます。

解除には、clear: bothclearfixoverflow:hiddenを使う方法があります。

 

clearクラスをつかう方法

floatの後続要素にclear: both;を入れて解除する方法です。

CSSfooter {
clear: both;
}

clear: bothとは、floatのleftもrightも解除するという意味です。

See the Pen
float-site3
by おじさん (@ozsanblog)
on CodePen.

 

clearfixをつかう方法

clear: bothは、後続要素のフッターでfloatを解除する方法でした。

一方、clearfixは仮想のコンテンツがあるように設定する方法で、後続要素が無い場合にも設定できます。

HTMLfloatした要素の親要素にclass=”clearfix”を追加。

CSS.clearfix:after {
content: “”;
clear: both;
display: block;
}

See the Pen
float-site4
by おじさん (@ozsanblog)
on CodePen.

 

overflow:hiddenをつかう方法

floatした要素は高さの概念が無くなるため、フッターが隙間に流れ込んでしまいました。

この方法は、overflow:hiddenが高さを認識する性質を利用する設定方法です。

CSS親要素にoverflow:hiddenを追加。

See the Pen
float-site5
by おじさん (@ozsanblog)
on CodePen.