Tweet

Pocket

【こちらの記事は、約4分程でお読みいただけます。】

こんにちは。技術担当の工藤です。

本日は、先週に引き続きフロートを解除するクリア属性について解説していきます。

フロート。解除しないとダメ？

フロートをすると、通常フローから外れてしまいその後のレイアウトに影響を与えてしまいます。
そのため、フロートをしたら必ず解除して通常フローに戻す必要があります。
他にも、高さが無くなるという特性があるのでバックグラウンド指定されているものが消えたり、いろんな不都合が起こります。

フロートの解除するクリア属性

clearプロパティーは、ブロック属性にしか効きません。

あと、プロパティーですが使うのはbothです。leftとrightは、ほぼ使いません。
clear:bothという形で覚えてもいいです。

フロートした要素の下にクリアをつける方法

<style>
.red,.blue{
     width: 100px;
     height: 100px;
     float: left;
}
.green{
     width: 200px;
     height: 100px;
     clear: both;
}
.red{
     background: red;
}
.blue{
     background: blue;
}
.green{
     background: green;
}

</style>
<div class="content__box">
     <div class="red">left</div>
     <div class="blue">right</blue>
</div>
<div class="green">footer</div>

スタンダートな形です。
フロートされた赤ブロックと青ブロックの下に配置する方法。
フロートが終わった後の、緑ブロックにclear:bothを付けて、フロートを解除します。

フロートの下に空要素を付けて、フロートを解除する方法

<style>
.red,.blue{
     width: 100px;
     height: 100px;
     float: left;
}
.green{
     width: 200px;
     height: 100px;
}
.both{
     clear: both;
}
.red{
     background: red;
}
.blue{
     background: blue;
}
.green{
     background: green;
}

</style>
<div class="content__box">
     <div class="red">left</div>
     <div class="blue">right</blue><br class="both"></div>
<div class="green">footer</div>

フロートさせたあとの要素に空の要素を追加して、フロートをクリアしてしまう方法。しかしこの方法は、CSS2から空の要素は極力なくしていくという方針があるので、あまり見かけません。昔のサイトにはあるかも？

clearfixを使う

clearfixとは、擬似要素のafterを使って擬似的にクリアプロパティーを作る方法です。
初心者の方は混合してしまいがちですが、CSSですのでCSSに書き込まないと動きません。

コードは一般的に、こんな感じになります。

.clearfix{
     zoom: 1;
}
.clearfix:before,.clearfix:after{
     content: "";
     display: table;
}
.clearfix:after{
     clear:both;
}

昔は、もっと長かったようですが最近は短くなりました。

コードの説明をすると、afterという擬似要素は、要素のあとにcontent内に記述された文字または画像を表示させる。content内の文字は、” “。空白。空文字なので、表示はさせるけど、なにも映らないという事です。

それでもよくわからない！って方は、content: “”;の中に文字でも入れてみましょう。

このcontentで表示された文字、もしくは画像はインラインレベルの要素になのでdisplay:tableでにブロックレベルの要素にして、clear:bothが効くようにします。displayはblockでも意味は変わってきますが、clearfixで使う場合は問題ないです。要はcontent内のインライン要素レベルをブロック要素のレベルに変更してしまえばいいわけです。

あとclearfixは、クラス名なのでcfとかでもaaaとかでもいいです。（aaaとか意味のないclass名の付け方はあとで混乱しますのでオススメしません）

beforeとzoom:1はIE6,７対策。最近のブラウザ事情ではなくてもいいでしょう。

floatさせた要素の包容したブロックに、クラスclearfixを記述します。
この辺が、初心者には混乱しがちで普通の要素でクリアさせる場合は、フロートの下のclearを置くのですが、クリアフィックスは要素を包容しているクラスに書くので間違えやすいです。

失敗例

<div class="content clearfix">
     <div class="red">left</div>
     <div class="blue">right</div>
     <div class="green">footer</div>
</div>//←ここにclear:both;が効く

これは、効きません。クリア属性がクラスcontentのあとにあるのでその前の緑のボックスでは、まだフロートフローになっています。
フロートで崩れなくするためには、まずフロートする要素に対して包容するボックスを作る必要があります。

<div class="content">
     <div class="red">red</div>
     <div class="blue">blue</div>
</div>//←ここにclear:bothが効く
<div class="green">green</div>

余談ではありますが、フロートは、包容されたブロックからははみ出ないという特性もあります。この包容されたブロックよりフロートするブロックの合計が横幅より大きい場合、カラム落ちという現象が発生し、落ちる事になります。

赤いボックスと青いボックスの横幅が100pxずつでクラスcontent__boxの横幅200pxの時、カラム落ちは発生しませんが、content__boxの横幅が150pxの時、フロートさせる横幅の合計値が、親要素であるcontent__boxを超えるので青いボックスは赤いボックスの横に行かず、青いボックスが落ちてしまいカラム落ちが発生します。
フロートで落ちるって時は、フロートする要素の横幅を落として見てください。

left

right

footer

.content__box{
     background: gray;
     width: 200px;
}
.red{
     widht: 100px;
}
.blue{
     width: 150px;
}

<div class="content clearfix">
     <div class="red">red</div>
     <div class="blue">blue</div>
</div>
<div class="green">green</div>

フロートさせた親の包容したボックスにクラスclearfixを記述すると、

<div class="content">
     <div class="red">red</div>
     <div class="blue">blue</div>
</div>　//この部分のあとにclear:bothが記述され、フロートが解除されます。
<div class="green">green</div>

初めての方におおい失敗例で、このclearfixの記述場所を間違えている時がありますので、

• フロートを使う場所には包容ボックスを作る。
• clearfixを使う場所は、フロートを包容する親要素。

という事を覚えておきましょう。この辺、clear:bothは、下に置くのに対してclearfixは上に置くのでややこしいです。

包容するクラスにoverflow:hidden;をかける。

.content{
     overflow:hidden;
}

<div class="content">
     <div class="red">red</div>
     <div class="blue">blue</div>
</div>
<div class="green">green</div>

これだけでフロートは解除されます。正確に言うと解除はされてはいませんが、clearfixを使った時と同じ状態になります。

終わりに

要素を横並びにする方法は、フロートだけでなく様々な方法があります。
display：boxや、display：inline-block等々がありますが、過去のブラウザに対応していないや、癖などいろいろな制約があります。

フロートしたらレイアウトが崩れた！なんて時は、きちんとフロートをクリアしているか確認してみましょう。フロートは、クリアとワンセットという事を覚えておけば、崩れも防ぎやすくなると思います。

Tweet

Pocket

Related posts:

CSSのフロートプロパティでブロック要素を左右に操作 いろいろと便利なoverflow:hidden;についてのあれこれ スタイルの記述と優先順位について before、afterを使ってコーディングの幅を広げよう