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
floatを解除する手法のclearfix と 次世代のレイアウトの話|Web Design KOJIKA17
(こちらのページが大変役に立ちました。わかりやすかったです。)