floatを使ってレイアウトを構築する場合、確実にfloatを解除することが大切になってきます。

解除方法として一番簡単なのは、floatをかけた要素の次にくる要素に clear:both をかけることです。

ただし、いつもその次の要素があるわけではありませんよね。そこで便利な手法を紹介します。

{clear:both}を使わずに簡単にClearfixでfloatを解除する方法

例えば、htmlが次の場合。

<div class="clear">
	<div class="floated"></div>
	<div class="floated"></div>
	<div class="floated"></div>
</div>

出来れば、4行目のdiv要素に{clear:both}を指定すればよいのですが、それが出来ない場合はCSSで親要素に次のように指定します。

.clear:before, .clear:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}

.clear:after {
	clear: both;
}

これでfloat解除できます。これでfloatを指定した要素の親要素のheight(高さ)が潰れるのも防げます。

手順としては、上に書いたCSSをコピペします。

そして、floatを解除したい要素の親要素に”clear”というクラス名を指定するだけです。

簡単ですね。