月別アーカイブ: 2016年2月

CSS floatの使い方とclear2

前回の記事でfloatとclearの基本的な使い方を書きました。今回は、floatを解除できる要素がない場合の対処、clearfixの仕組みについてです。

フロートをかけていない状態

上の画像を見てください。ABCD 4つのボックスのうち、ABCはid名wrapのボックスに入っています。この#wrapの子要素ABCにfloatをかけ、次のようにレイアウトしたとします。

フロートをかけて解除なし

このままではfloatが解除されていないため、ボックスDが他のボックスの下にかくれてしまっています。また、#wrapの背景が表示されなくなってしまいました。(wrapの文字が無ければ全く表示されません。)

通常、ブロック要素に高さは、heightの指定がなければ子要素の高さを合計して算出されます(子要素の高さに合うように自動調整される)。しかし、子要素にfloatがかかっているときは、親要素から浮いて(float=浮動)いるため、親要素の中に入っていないものとして高さ算出の対象から外れてしまいます。これが#wrapの背景が表示されなくなってしまった原因です。floatを解除して最後の子要素が正しい位置にくれば、子要素の高さが分かるようになり、親要素の高さも出ます。

では、この場合どこにclearを指定したらfloatを解除できるか考えてみます。ボックスDはfloatがかかっていないので、試しにclearを指定してみます。

ボックスDにclear

ボックスDは正しい位置に表示されましたが、ボックスDは#wrapの外にあるので、#wrapの中身は相変わらずfloatをかけた要素のみです。これでは高さが算出されないため、#wrapの背景が表示されません。親要素の高さを出すには、floatがかかっている要素と同じ階層の要素にclearを指定する必要があります。そのため、この例ではclearを指定できる要素がないことになります。

clearを指定できる要素がない場合の対処として、一般的によく使われているのがclearfixです。疑似要素の:afterを使って、floatをかけた要素と同じ階層に、clearをかけるための疑似的な要素を作ります。(:afterは、ある要素の最後の子要素として、疑似的にインライン要素を作るものです。)clearfixは、floatをかけた要素の親要素に指定します。

clearfix

.clearfix:after{
   content: "";  /* :afterで空の(疑似的な)インライン要素をつくる */
   display: block;  /* clearを指定するためにブロック要素にする */
   clear: both;  /* float解除 */
 }

#wrapにclearfix

これできちんとfloat解除ができます。floatを解除しないと思わぬところで悪影響が出たりするので、必ず解除するように気をつけてください。

CSS floatの使い方とclear1

ボックスを横並びにする際には、一般的にfloatがよく使われます。floatは、指定した要素を左右どちらかに寄せ、あとに続く要素を回り込ませるプロパティです。性質に癖があるため、CSSを学んでいて躓きやすい部分です。今回はfloatと、その解除に使われるclearプロパティについて詳しく書いていきます。

floatの概要

floatプロパティは、leftまたはrightで指定します。float:left;をかけた要素は左側に寄り、あとに続く要素は右に回り込みます。float:right;なら右に寄り、続く要素は左に回り込みます。

例えば、画像のようにABC3つのボックスがあるとき、

フロートしていない状態

Bにfloat:left;をかけるとこうなります。

Bにフロート

CがBの右側に回り込んでいますが、Bはfloatで浮いてしまっているので、Cと重なって表示されています。なお、文字はきちんと回り込むので、回り込ませたいのが文字だけならこれでOKです。

では、ボックスAとボックスBを横並びにしたいときの例です。ボックスAのみにfloat:left;をかけるとこうなります。

Aにフロート

floatで浮いたボックスAの下にボックスBがかくれてしまいました。ボックスを横並びにするには、横並びにしたい要素全てにfloatを書ける必要があります。そこで、Bにもfloatをかけます。

A,Bにフロート

今度はボックスCが回り込んでかくれてしまうので、clear:both;で回り込みを解除します。

A,BにフロートCで解除

clearプロパティを指定した要素は、floatによる回り込みの影響を受けない位置まで下がって表示されます。これは、clearプロパティがfloatのかかった要素の高さ分、自動でmargin-topを付けているからです。なお、clearを使った要素のmargin-topは効かなくなるのでご注意ください。

次回の記事では、clearをかける要素が無い場合の対処、clearfixについて書いていきます。