フロート解除の際に利用されるクリアフィックス。とりあえず使っとけばいいんでしょ？って思うかもしれませんが使わなくていい場面も沢山あります。

毎回class=”clearfix”って書くのめんどいし、ソースが長くなりますものね。

クリアフィックスの使い方はこちら

そもそもclearfix(クリアフィックス)とは何か

左寄せとか右寄せとかにCSSで「float:left」と記述しますね。フロートを使うだけだとレイアウトがぶっ飛びます。毎回解除してあげる必要があるわけです。
フロートをかけた要素の次の要素に「clear:both」をかけて上げるとそこでフロートの効果を終了させます。
しかし、そう上手いことできない。そこで考えられたのがクリアフィックスです。

このように記述します。clearfixというクラスを作るわけですね。

.clearfix:after{
    content: "."; 
    display: block; 
    height: 0; 
    font-size:0;	
    clear: both; 
	visibility:hidden;
}
.clearfix{
	display: inline-block;
} 
/* Hides from IE Mac */
* html .clearfix{
	height: 1%;
}
.clearfix{
	display:block;
}
/* End Hack */ 

昔はbrを置いてclear:bothをかけていたようです。今は無駄タグを使わないのが主流なので使っている人はいないと思います。

clearfixを使わないで簡単にフロートを解除するには

フロートを使いっている要素を囲んでいる親要素へ「overflow:hidden」をかけます。

以下がサンプルです。

HTML記述

<div id="wrap">
	<p class="left">左寄せ</p>
	<p class="right">右寄せ</p>
</div>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

CSS記述

#wrap{overflow:hidden;}
.left{float:left;}
.right{float:right;}

overflowでフロート解除をするさいの注意

「overflow:hidden」はそもそもはみ出さないというプロパティです。ですから断ち切られる場合があります。
「position」で重ねる場合などは見切れる可能性が大きいので素直にクリアフィックスを使いましょう。