Web制作のアレコレ

floatプロパティと注意点

サイトのレイアウトなどを作っていく際に要素を横並びにする場面が出てきます。
ナビゲーションだったり、メインコンテンツとサイドバーだったり
ここでは一つの方法として「float」を紹介します。

floatプロパティ

floatプロパティは要素を回り込ませて、横並びにするCSSプロパティ

floatのプロパティ値

floatで使うプロパティ値は以下の3種類を多用することになります。

none デフォルト値 横並びを無効にしたいときにする設定
left 要素を左から順番に横並びにしたいときに使う
right 要素を右から順番に横並びにしたいときに使う

主な使い方

  • メインコンテンツをサイドバーを並べる
  • ナビゲーションを横並びにする
  • 画像と文章を横並びにする

など、ブロックレベルの要素を横並びにするときによく使われるプロパティですが...

floatの使用はかなりクセがあります!

floatがかかった要素は、浮き上がる(イメージ)感じになります
floatして横並びにしようとした要素の幅の合計が親の要素より大きいとカラム落ちしてしまったり・・・
floatの回り込みの解除をしてあげないと開いた隙間にコンテンツが潜り込んでしまう・・・
などなど、レイアウトが豪快に崩れる原因になります。
ですが、ある程度のルールを守ることによってこの問題を防いでいきます。

ルール1

横並びにする要素は親要素の横幅に収まるように設定する。
カラム落ちを防ぎます。これに関しては親要素の幅に合わせて回り込ませる要素の横幅を設定していけばOK!

ルール2

floatを使った要素の親要素を使って回り込みの解除をする。
これには二つの方法があります。

overflow:hiddenを使う方法

単純にfloatをかけた親要素に対してこのプロパティを指定してあげればOK!
もっとも簡単に回り込みの解除ができる

疑似要素を使って回り込み解除

cssにはfloatの回り込みを解除するためだけに用意されているプロパティがあります。
clear:both
このプロパティをfloatをかけた要素の直後の要素に使うと回り込みの解除をすることができますが、最適なタグがあるとは限りませんので、floatした要素の直後にcssから要素を追加して、そこに回り込みの解除をしてあげるとうまくいきます。

CSS


.clearfix:after{
    content:""; /*空のコンテンツを挿入 これがないとafterが機能しない*/
    display:block; /*表示形式はブロックレベルに指定しないとうまく機能しないブラウザがある*/
    clear:both; /*そして、floatの解除をする*/
}

あとは、floatをかけた親要素に対してclass名「clearfix」をつけてあげるだけ。

このルールさえ守ってあげれば
極端なレイアウト崩れは起こりにくいと思います。
少し扱いが難しかもしれませんがfloatプロパティを使いこなせるようになりましょう