読者です 読者をやめる 読者になる 読者になる

プログラミングノート

プログラミングの備忘録です

CSS clearfixについて

 CSSでブロック要素を横に並べた後、floatプロパティの指定を解除しないと、レイアウトが崩れてしまうことがあります。

 floatプロパティの指定を解除するために、clearfixを使うことができます。

 

 今回は、clearfixに関しまして、Nicolas Gallagher さんが考案されました A new micro clearfix hack – Nicolas Gallagher を使わせていただきます。

 

 CSSでブロック要素を横に並べるに関しましては、CSS ブロック要素を横に並べる - プログラミングノート をご参照ください。

 

手順

1.CSSでclearfixを定義します。

2.HTMLでclearfixクラスを呼び出します。

  floatプロパティを指定した要素の外側の要素でclearfixクラスを呼び出します。

 

サンプル

 ▼HTMLファイル

<div class="cf">

    <img src="img-test1.png" />

    <img src="img-test2.png" />

</div>

 

CSSファイル

/* 外側のブロック */

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}

 

/* 内側の画像 */

#test img {

    display: block;

     float:left;

}

 

▼before擬似要素

:before擬似要素は、要素の最初の子要素となる擬似要素を生成します。

 

▼after擬似要素

:after擬似要素は、要素の最後の子要素となる擬似要素を生成します。

 

cfクラスの:after疑似要素にclear:bothを指定することで、cfクラスを指定したdivタグの最後に子要素として<div style="clear:both"></div>を追加したのと同じようになります。

 

参照

::before (:before) - CSS | MDN

::after (:after) - CSS | MDN

floatを解除する手法のclearfix と 次世代のレイアウトの話|Web Design KOJIKA17

(こちらのページが大変役に立ちました。わかりやすかったです。)