floatプロパティと注意点
サイトのレイアウトなどを作っていく際に要素を横並びにする場面が出てきます。
ナビゲーションだったり、メインコンテンツとサイドバーだったり
ここでは一つの方法として「float」を紹介します
floatプロパティ
floatプロパティは要素を回り込ませて、横並びにするCSSプロパティ
floatで使うプロパティ値は以下の3種類になります。
| none | デフォルト値 横並びを無効にしたいときにする設定 |
|---|---|
| left | 要素を左から順番に横並びにしたいときに使う |
| right | 要素を右から順番に横並びにしたいときに使う |
主な使い方
- メインコンテンツをサイドバーを並べる
- ナビゲーションを横並びにする
- 画像と文章を横並びにする
など、ブロックレベルの要素を横並びにするときによく使われるプロパティですが．．．
floatの使用はかなりクセがあります！
- floatがかかった要素は、浮き上がる（イメージ）感じになります
- floatして横並びにしようとした要素の幅の合計が親の要素より大きいとカラム落ちしてしまったり・・・
- floatの回り込みの解除をしてあげないと開いた隙間にコンテンツが潜り込んでしまう・・・
などなど、レイアウトが豪快に崩れる原因になります。
ですが、ある程度のルールを守ることによってこの問題を防いでいきます。
ルール1
横並びにする要素は親要素の横幅に収まるように設定することで カラム落ちを防ぎます。これに関しては親要素の幅に合わせて回り込ませる要素の横幅を設定していけばOK！
ルール2
floatを使った要素の親要素を使って回り込みの解除をする。
これには二つの方法があります。
単純にfloatをかけた親要素に対してこのプロパティを指定してあげればOK!
もっとも簡単に回り込みの解除ができる
擬似要素を使って回り込み解除
cssにはfloatの回り込みを解除するためだけに用意されているプロパティがあります。
clear:both
このプロパティをfloatをかけた要素の直後の要素に使うと回り込みの解除をすることができますが、最適なタグがあるとは限りませんので、floatした要素の直後にcssから要素を追加して、そこに回り込みの解除をしてあげるとうまくいきます。
|
1 2 3 4 5 |
.clearfix:after{ content:""; /*空のコンテンツを挿入 これがないとafterが機能しない*/ display:block; /*表示形式はブロックレベルに指定しないとうまく機能しないブラウザがある*/ clear:both; /*そして、floatの解除をする*/ } |
あとは、floatをかけた親要素に対してclass名「clearfix」をつけてあげるだけ。
このルールさえ守ってあげれば極端なレイアウト崩れは起こりにくいと思います。
少し扱いが難しかもしれませんがfloatプロパティを使いこなせるようになりましょう
