floatを解除させる手法「claerfix」

floatプロパティでレイアウトを組んでいると、
背景画像が途切れたり、高さが合わなくなったりする、場合があるかと思います。
そんなときに便利なのがclearfixと呼ばれる手法。
clearfixと検索すると多数出てきますが、
コリスさんで紹介されていた手法が良さそうでしたので、そちらをご紹介。

/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

使い方はclearしたい親要素に対してclass=”clearfix”と指定します。

※なおモダンブラウザだけでもいい、といった場合はclearfixを使わずに、
親要素にoverflow:hidden;を指定すると良いようです。

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る