【Web制作】『clearfix』というfloatを解除する方法

clearfixとは？

『clearfix』はCSSのfloatを解除する方法の1つで、HTMLのclass属性にあるクラスを指定する事でfloatを解除します。

floatを使ったレイアウトは解除する方法が問題になります。

この方法であればクラスを指定するだけなので、非常に簡単です。

ここでは、この『clearfix』を利用する方法について解説します。

まず、CSSに次のコードを書きます。

clearfixのCSS

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

そしてfloatを使った要素の親要素のclass属性に『clearfix』を指定します。

例としては次の形です。

clearfixを使ったfloatの解除

<div class="clearfix">
<div>floatを使った要素</div>
<div>floatを使った要素</div>
</div>

以上でfloatの解除ができます。