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”というクラス名を指定するだけです。
簡単ですね。