一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

CSSのclearfixについて

前回、floatについて書いたので今回はそのfloatを解除する技clearfixについて書いてみたいと思います。

clearfixって簡単にいうと、

::afterを使ってfloatをかけている要素の後ろに擬似的な要素を作り、そいつに対して、clearプロパティを適用させる技

だと思います。

たとえば

<ul>
    <li style="float:left;">フロート</li>
    <li style="float:left;">フロート</li>
    <li style="float:left;">フロート</li>
    <li style="float:left;">フロート</li>
</ul>

ていうhtmlがあった場合。

このままだとulが宙に浮いた存在(高さ0)となっており、わざわざliの後にdivかなにかいれてclearプロパティを適用しなければfloatを解除できません(;´Д`)

そこでclearfix!!!
こんな感じで書きます。

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


まず、擬似要素を使う際、contentプロパティは必須なので、content:""と書いてます。中身は空で大丈夫です。

次に擬似要素はデフォルトでインライン要素になっているので、display:blockでブロック要素にします。

ここでポイントは、ul::afterで挿入されるのは

<ul>
    <li style="float:left;">フロート</li>
    <li style="float:left;">フロート</li>
    <li style="float:left;">フロート</li>
    <li style="float:left;">フロート</li>
</ul>
<あふたーで挿入されたやつ>

ではなく、

<ul>
    <li style="float:left;">フロート</li>
    <li style="float:left;">フロート</li>
    <li style="float:left;">フロート</li>
    <li style="float:left;">フロート</li>
    <あふたーで挿入されたやつ>
</ul>

だということ!!たまに勘違いしちゃうときがあるので注意です!!
ulの外に要素が入っちゃうと、結局ulの高さが0のまま放置されちゃいますから!!

そして最後にclear:bothを指定してあげてめでたしめでたし。
これでちゃんとulの中にfloatしたliが収まったレイアウトになったと思います。


ちなみにclearfixをよく使いそうだな〜と思った場合はclearfix専用のcfというクラス(名前はなんでもいいです)を用意して、
htmlを

<ul class="cf">
    <li style="float:left;">フロート</li>
    <li style="float:left;">フロート</li>
    <li style="float:left;">フロート</li>
    <li style="float:left;">フロート</li>

</ul>

css

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

とすれば他の箇所でも楽にclearfixを使いまわせるので、便利だと思います。


普段なにげに使っているclearfixですけど、いざアウトプットしてみると奥が深いというか説明しにくいというか…良い勉強になりました。

なにかおかしな所があったら教えて下さい、偉い人。

小さなことからコツコツと。