You are here: Home » css関係 » floatの解除とclearfixの書き方とか働きとか

floatの解除とclearfixの書き方とか働きとか

このページではcssのfloatの解説とclearfixの解説をしています。

floatとclearfix

floatとは

floatとは、幅(width)指定した要素を右や左に寄せる機能があります。

例えば下のような二つにボックスがあるとします。

box001

#Greenを#light blueの隣に狂いなく移動したい場合、floatを使うことが多いです。その場合、それぞれにfloatを指定します。

float

これで、#lightblue #Greenそれぞれ回り込んだ状態になりました、しかし、このままでは問題が出てきます。

スポンサーリンク

floatの振る舞い

float05

floatの値にはleft(左寄せ)とright(右寄せ)があります。上の画像の場合leftを指定してるので、左に回り込みます、rightなら右に回り込みます。

ただし要素にfloatを指定すると、後に続く要素もそれに続くように回り込んでしまいます。さらに、floatを指定した要素は画面から浮いた状態になります。

 

下の三つのボックスのうち#Yellow(分かりやすいように幅、高さを大きくしています。)のみfloatを指定しない状態だと

float01

こんな感じで#Yellowが#lightblueと#Greenに重なった状態になります。

なぜこんなことが起きるかというと、#lightblueと#Greenが浮いてるので#Yellowが開始位置の左上から表示されてます。(floatの意味は「浮動」の意味

なので、図にするとこんな感じです。

float02

 

このままサイトのレイアウトはできないので、floatを解除してあげる必要があります。

 

float解除にはclearfixかclear:both

clearプロパティは、float指定したボックス要素の回り込みや浮動を解除する作用があります。

float003

 

clearを#Yellow に指定してfloatを解除しています。

clearプロパティにはleft(左寄せの要素を解除)、right’(右寄せの要素を解除)、both(左、右の要素を解除)がありますが基本的にbothで十分です。left、rightはほとんどつかいません。

 

clearプロパティの問題点

解除したい要素に指定するので無駄に<div>など指定する必要がある

clear指定した要素だけ解除されるのでfloat指定した要素は浮いたままの状態になる(空白の<div>にclear指定した場合は別)

 

さらに、空白の<div>にclrar指定することは、W3Cが「できるだけ外部cssに記述するべきです。」と言っているのと、実際コードをリテイクする際に無駄な記述が増えた状態なので扱いづらくなるのもあり基本的には、空白の<div>にclrar指定は使いません。

 

clearfixとはcssの技の一つ

clearfixとは、clearと違い様々なcssを駆使して適切にfloatを解除する方法です。(オーストラリア人のTony Aslettという方が確か2004年頃にcleafixを考えました。)

Original Clearfix

上の例が一番最初の考えられたclearfixです。その後、時代に合わせていくつかにcleafixが出てきました。

 

Micro Clearfix

現在では記述を少なくした、Micro Clearfixを使うことが多いです。

 

シェアがかなり低くなってきたie6、ie7を対象から外したclearfixもあります。

スポンサーリンク

clearfixの解説

clearfixはcssの集合体です。大事な部分は疑似要素の:afterという記述です。

 

clearfixを指定してない例

cleafix007

 

floatを指定した要素は浮いた状態(この場合lightblueとGreenが浮いてます。)なので、親が高さ(height)を認識できません。

cleafix009

図にするとこんな感じです。

 

 

そこでcleafixの:afterの出番です。

 

:afterは疑似要素の一つで、指定した要素が終了した後に文字、画像、ボックスを表示できます。

 

上の場合、clearfixはただのクラス名なので任意でclとかcfに変えることも可能です。

 

親要素の<div id=”Yellow”>に class=”cleafix”を指定して<div id=”Yellow”>の終了</div>に何もないboxを表示しています。

cleafix008

つまり、clearfixは指定した要素の最後に目に見えないboxをつくりそれがclear:bothの働きをしているということです。

 

cleafixの大まかな働き

.clearfix:after   = afterは指定した要素の最後になにかを表示できます。

content:””;  = contentプロパティは、:beforeやafterのみに適用できる疑似要素で、文字や画像を入れることができます。そこに、「” “」のように何も無い空白状態にしています。

display:block;  = 上の状態をブロック要素にします。

overflow:hidden; = それを非表示にします

clear:both; = それらにclear:both;を指定している。

 

 

ということです。

 

そのほかにもoverflowを使ったfloat解除方法があるのですが、スクロールバーが意に反して表示されてしまうことがあるので、個人的にはclearfixの方が安全だと思ってます。

スポンサーリンク

 

コメントを残す