float失敗例の原因と解決策|[カラム落ち] [予期せぬ回り込み]

WEBデザインを始めたばかりの方にとってはfloatタグで悩まされるケースはよくあるのではないでしょうか?

横に並べようと思っていたのにwidthの幅が合っていなくてカラム落ちしてしまったり、横に並べるつもりがなくても次の要素が勝手に回り込んでしまったりとなかなか言うことを聞いてくれないタグの一つだと思います。

今回は初心者の方でもfloatを理解してもらえるように解説していきたいと思います。

子要素の横幅は親要素に合わせよう

まずは要素を横並びに揃えてみましょう。

表示結果
floatのサンプル

<div class="wrapper">
	<div class="block block1">ブロック1</div>
	<div class="block block2">ブロック2</div>
	<div class="block block3">ブロック3</div>
	<div class="block block4">ブロック4</div>
	<div class="block block5">ブロック5</div>
</div>

それぞれのブロックに背景の色を付けており、blockという名のclassにfloat:leftのスタイルを付けると横並びになりますね。

表示結果
floatのサンプル結果

今はwrapperというclass名にブロック1~5の合計したwidthが入っているため、隙間なくピッタリwrapperに収まっています。

ここでブロック2の横幅を200pxにしてみましょう。

表示結果
floatのサンプル

ブロック1~5の横幅の合計がwrapperの700pxを越えてしまったため、一番最後のブロック5が下の段に落ちてしまいましたね。これをカラム落ちと言います。

カラム落ちはfloatを頻繁に使っていると必ずと言っていいほど起こってしまうfloatの失敗です。

なぜカラム落ちが起こるかというと、今回の例にあるように子要素の横幅が親要素の横幅を越えてしまって最後の要素が下の段落に落ちてしまうのです。

今回の例では単純な作りなので幅を合わせることは簡単ですが、複雑なサイトになってくるとたくさんの要素がmarginやpaddingを使ったりして子要素の横幅の合計がわからなくなってしまったりしてカラム落ちが起こってしまうのです。

paddingを使う時はbox-sizing:border-box;を使おう

表示結果
floatのサンプル結果

それでは先ほどのサンプル画像をもう一度見てください。ブロック1などの文字が左上にピッタリ付いているのは少しカッコ悪いので、blockという名のclassにpadding:10px;をつけてみましょう。

するとこうなりました。

表示結果
floatのサンプル

あらら、またカラム落ちが発生しましたね。

これはブロックのwidthは変えていないのですが上下左右にpaddingを10px分付けたため、一つ一つのブロックが左右の10pxで20px分横幅が広がってしまったので親要素の700pxを越えてしまったということになります。

こんな時は各ブロックのスタイルにbox-sizing:border-box;を付けましょう。

.block{
	float: left;
	padding: 10px;
	box-sizing: border-box;
}

表示結果
floatのサンプル

するとあっという間にpaddingはついた状態でピッタリとwrapperの中に収まっていることがわかります。

box-sizing:border-box;とは、縦横の幅が指定されている要素をpaddingやborderも含めた幅に調整してくれる大変便利なプロパティです。

例えば今回のブロック1はwidthが300pxでheightが50pxに指定されており、上下左右にpaddingを10px付けたことで全体の大きさはwidthが320pxでheightが70pxになるはずです。

ところが、box-sizing:border-box;を付けたことで、paddingを含めたブロックの大きさも横幅が300pxで縦幅が50pxになったということになります。

このbox-sizing:border-box;はfloatを使う場面以外でも利用する機会がたくさんあるので是非マスターしておきましょう。

floatで予期せぬ回り込みが発生したらclearプロパティ

それでは次はfloat:left;を使って左寄せにした赤いブロックと、float:right;を使って右寄せにした緑のブロックを用意しました。

表示結果
floatのサンプル

この赤と緑のブロックの下に<p>を入れてテキストを表示させてみたいと思います。

<div class="red" style="float:left;"></div>
<div class="green" style="float:right;"></div>
<p>
	サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
</p>

するとこうなりました。↓

表示結果
floatのサンプル

赤と緑のブロックの下にテキストを表示させるつもりが、赤と緑のブロックの間にテキストが表示されてしまいましたね。

これは赤と緑のブロックについているfloatに原因があります。floatには次に来る要素を回り込ませる効果があるので、少しでも隙間があれば次にくる要素がブロック要素であっても右側若しくは左側に回り込んでしまうのです。

このような予期せぬ回り込みが起こってしまったら、clearプロパティを使うと便利です。

clearプロパティは手前に存在していたfloatによる回り込みの効果を消してしまうことができるのです。

clearプロパティ
clear:left; float:left;に対する回り込みを解除する
clear:right; float:right;に対する回り込みを解除する
clear:both; float:left;、float:right;の両方に対する回り込みを解除する

今回はleftの回り込みもrightの回り込みも両方あるので、clearプロパティに上の3つのどれを選んでも同じ結果になりますが、特別なケース以外はclear:both;を使っておけば大丈夫です。

それでは今回の例ではpタグにclear:both;のスタイルを当ててみます。

<div class="block block1"></div>
<div class="block block2"></div>
<p style="clear:both;">
	サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
</p>

表示結果
floatのサンプル

このように赤と緑のブロックの下にテキストが表示されるようになりましたね。

floatを使って予期せぬ要素が回り込んでしまう対策方法として、clearプロパティ以外にも親要素にoverflow:hidden;を当てる方法もあります。

しかしclearプロパティの方が簡単で実用的なのでclearプロパティを使う方法をマスターしておけば大丈夫かと思います。気になる方はググればすぐに見つかるかと思います。

まとめ

今回はfloatを使ったときに発生する予期せぬトラブルの原因と対策を書いてみましたがいかがでしたでしょうか?

floatに代わる新しいプロパティなんかも登場しつつありますが、やはりfloatを使いこなせないことには思い通りのWEBデザインをすることはまだまだ不可能に近いです。

初心者にしてみればなかなか理解がしにくいプロパティで、最初のうちは言うことを聞いてくれないことも多々あると思います。

しかしfloatの扱いをマスターすると一気にWEBデザインの幅が広がりますし、思った通りのレイアウトを素早く作り上げることができるようになると思いますので是非マスターしましょう。

カテゴリーCSS

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です