レイアウト崩れの原因！floatを使ったらclearfixを！【HTML・CSS】

ご覧いただきまして、ありがとうございます！

CSSでレイアウトを組んでいる時に、カラムがおかしい。。。

そんな経験はありませんか？？

CSSのプロパティfloatを使った時に起こる可能性が高いです。
そんな時はclearfixを使ってみましょう！

いちいち、floatの回り込みを解除するのは面倒です。

一括でclassを指定して解除していく方法を解説していきます。

結論

それでは早速、結論となるコードを紹介していきます。

clearfix::after{
   content: "";
   display: block;
   clear: both;
}

<div class="clearfix">
	<div class="blue"></div>
	<div class="green"></div>
</div>
<div class="next">次の要素次の要素次の要素次の要素次の要素次の要素</div>

上記のCSSを設定してみてください。

そして、floatをかけた親要素にclass名として「clearfix」を付与してあげるだけです！

私は「clearfix」だと長いので、「cf」としています。

cf::after{}こんな感じですね！

clearfixの解説

それでは「clearfix」について詳しく解説していきたいと思います。

おそらくfloatをうまく解除できていない時は、上のような感じになっているはずです。

本来イメージしているのは「次の要素！」が青いボックスと、緑のボックスの下にくるような感じです。もちろん、「次の要素！」がテキストに変わっても同じですね。

では次に本来のイメージを表示してみます。

いい感じに「次の要素！」が青いボックスと、緑のボックスの下に行っていますね。

これは「次の要素！」がテキストでも同様です。

では、なぜ思い通りにカラムが出来ないのか。

それはfloatをかけた時の回り込みの解除が出来ていないからです。

そこでclearfixの出番ですね！

本来ならば、floatをかけた要素に対して、、、

<div style="clear: both;"></div>

と入れたり、、、

<div class="float_none"></div>
<style>
        .float_none{
            clear: both;
        }
</style>

と、いれなければなりません。

そこで初めてfloatが解除されて、思い通りのイメージになるはずです。

ですが、clearfixを使うと、とても簡単な事が分かります。

まず、CSSに、、、

clearfix::after{
   content: "";
   display: block;
   clear: both;
}

上記のコードを書き込みましょう！

そして、floatをかけた親要素に「clearfix」を付与してあげればOKです。

今回の例では、下のような感じです。

<div class="clearfix">
	<div class="blue"></div>    //cssにてfloat: left;
	<div class="green"></div>    //cssにてfloat: left;
</div>
<div class="next">次の要素次の要素次の要素次の要素次の要素次の要素</div>

class=”blue”と、class=”green”にfloatをかけています。

この場合、それの親要素、divに対してclass名clearfixを付与しましょう。

そしたら、class名nextがいい感じにカラム落ちするはずです。

この時の注意点は、floatをかけていない要素までclearfixで囲ってはいけません。
nextの次にclearfixの閉じタグがくる感じですね。これはNGです。

あくまでも、floatをかけた親要素になります！

これで後は、clearfixを使いまわすだけになります。

使いまわす際、clearfixだと長いので私は「cf」にしていますｗ

clearfixについては以上になります。

ご覧いただきまして、ありがとうございました！

まとめ

私もHTML、CSSを勉強したての時は、「なんでレイアウトが思い通りにいかないんだろう。。。」と途方に暮れていましたｗ

ですが、まずは「clear」というプロパティの存在を知ってそこから「clearfix」の存在を知りました。

なぜ、clearfixの存在を知ったかというと、毎度毎度、clear: both;するのが面倒だったからですｗ

そこで、ネット情報を調べてみました。

すると、class名を振るだけで、回り込み解除が出来る事を知ったのです。

公式サイト様やブロガーの皆様にはいつも感謝していますｗ

今回はここまでです。

ご覧いただきまして、ありがとうございました！