【脱初心者!】ふわふわお化け?floatバグで泣かないための3つのヒント!

「人生もプロパティもなんでこんなにルールに縛られて生きていかなきゃいけないの…?ルールなんかなくなっちゃえばいいのに!」なんて、思うように配置が決まらない日はドンヨリ気分になりますよね。

でも、ルールに外れてみてからわかる、ルールのありがたみ。そんなわけで、CSSをつかっていると初心者がぶつかりがちな”floatのクセ(仕様)“についてのお話をします!「なんでこんなレイアウト崩れに!?」と翻弄されていたアナタも、読み終わるころにはコーディングライフがハッピーになっているにちがいありませんよ!

20160920

CSSプロパティ:float

【基本的な値】
float: none;
 初期値、フロートの指定はなし。
float: left;
 指定した要素を左に浮かせ、続く要素は右に回りこむ。
float: right;
 指定した要素を右に浮かせ、続く要素は左に回りこむ。
float: inherit;
 親要素のフロートの値を継承。
※inheritもありますが、使うことがめったにないので説明を割愛します。

floatを使いこなすには、基本値とfloat本来のクセ(特徴)を理解することが大切です。

img_01

floatのクセとは

■floatは回り込みの意味より”浮かせる“という意識

直訳すればわかるように、floatは回り込みというより、”浮かせる“​ということに本質があるのです。この概念を理解しないでつかうことが、floatのコントロールがしにくくなる最大の原因です。浮いた要素はCSSのありとあらゆるルール(概念)から外れてしまいます。

従来のCSSプロパティにはそもそもボックスの配置に特化したものがなく、floatという概念を応用して少々無理をしながら配置をしていました。しかし、2016年以降は対応ブラウザに応じて新しくできたCSS3のプロパティ”flexbox“が柔軟に対応できるものと話題になり、積極的に使用される傾向があります。

img_02

【HTML】

【CSS】

ルールから外れるがゆえによくあるfloatのトラブル

【その1】floatさせると、文字だけ置いてけぼりに。

ためしに、side_01のみを浮かせてみましょう。すると、下記(上段)の画像のようにside_02のボックスが消えました。じつはこれ、消えたのではなく下に埋もれている​だけなんです。side_01が浮くことによって、空いたスペースにside_02が詰まって並んだともいえますね。下記(下段)の画像のように、ちょっと斜めにすると、わかりやすくイメージできると思います。

img_03.1

ここで文字だけ取り残されている理由が、サイズがside_01、side_02ともに同じだからなのです。02の中に01が入っているような状態なので、はじめに入っていた02の言葉があふれてしまい、下に追いやられたという状態になります。02の幅を大きくすればもちろん、入ります。
※この状態を利用して、キャプション風にするのも一つの小技ですね!

【その2】floatさせると、背景が消える。

floatさせたいものにスタイルを当ててるうちに、親要素の背景などが消えた経験はありませんか?

20160920_02

この原因は、親要素の中に入っていた子要素がすべてfloatで浮いてしまったため、高さを保てなくなったことにあります。この状態はfloatの特徴というより、ボックスの性質​からきています。ボックスは中に何かが入っていないと、自分の形を保てなくなる性質があるのです。
※ボックス:通常であれば並べた際に縦に並んでいくもの。(div、h1~h6、ul、table など)

つまり、floatさせると何も入っていない状態になるので、背景が消滅した。​ということになります。では、親要素に何かを入れている状態にすれば良い!というのが解決策のヒントになります。

– 対策1 親要素にheight(高さ)を指定する。
回り込ませるための基準となる親要素には、しっかりと幅を指定しましょう!
.container {
  margin: 0 auto;
  background-color: #fbe7cc;
 width: 300px;
 height: 300px;
}

サンプルデータ
See the Pen kkvrEp by nomal; (@nomal) on CodePen.

 
– 対策2 floatをつかったあとは、しっかりclearfixをつかう。
2013年ごろまでは、floatを解除するさいにclearプロパティを使う。ということがメジャーな対策でした。ですが、この方法は「乱用するとレイアウト崩れをおこしたさいに修正箇所がわかりづらく、ややメンテナンス性が劣る。」という理由から、今ではclearfixというものをCSSで定義し、それを解除したい要素にあてるというものが効果的とされています。

– clearfixには色々な歴史がある。
さまざまなブラウザのデフォルトルールがかわるように、clearfixもそれらのルールにあわせて開拓されてきました。人によって定義の仕方はさまざまですが、clearfixのclassをつくり、HTML要素にわりあてるものから、float対策のためにあらかじめdivやulをすべてclearfixさせてしまう方法など、バグを少なくするための工夫が練りこまれています。

– clearfixの一例::divやuiにすべてclearfixさせる定義
div:after,
ul:after {
    content: “”;
    display: block;
    clear: both;
}

– リセットCSSのフレームワークには大抵、clearfixが入っている
 CSSをつかうさい、ブラウザの見え方の差を埋めるためリセットCSSが提唱されました。そこから使い
やすいリセットCSSのフレームワークが展開され、clearfixもその要素のひとつになったのです。現在メ
ジャーなフレームワークは下記の二つ。はじめのうちは、いずれかのスタイルを読み込み、CSSを書く
と大変便利です。

【Normalize.css】

img_05

参考:https://necolas.github.io/normalize.css/

【sanitize.css】
Normalize.cssと同じ作者が作成しています。

img_06

参考:https://jonathantneal.github.io/sanitize.css/

次のページ:
floatさせても画像に文字が埋もれてしまう…

 

この記事を書いた人:nomal

nomal

大手印刷会社で求人広告(エディトリアルデザインやコピーライティング)を担当し、2年半働いたあとWebデザイナーに転身。 猫とお寿司には目がありません。イラストを描いてリフレッシュしながら楽しく過ごしてます。 Twitter:@nomal_f

関連する記事

facebook

案件情報や最新記事をお届けします。
ぜひチェックしてみてください。