clearfix(クリアフィックス)の記述

clearfixはCSSに記述して、クラス名に指定して適応させます。

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 */ 

見ての通りクラス名が『clearfix』となっています。これは通称であり好きな名称に変えても問題ありません。

色々書かれていて訳がわかりませんが、cleafixと名づけられた要素のお尻に”.”を入れてclear:bothをかけているだけです。

記述する箇所

float(フロート)がかけられた要素の親のクラスに対してclearfixを指定します。

<div class="clearfix"><!-- ここにクリアフィックス -->

   <div style="float:left">
   フロートを左に指定された領域。
   </div>

   <div style="float:right">
   フロートを右に指定された領域。
   </div>

</div><!-- クリアフィックス -->

ちなみにクラス名は半角スペースを空けることで複数指定が可能です。

<div class="pop white-box clearfix">
↑クラス名はいくつも付けられる。
</div>

フロート解除はコーディングの基礎であり、初めにつまずく箇所

フロートをかけられた要素は自身よりも以下に記述されたものに対して全てに左寄せ・右寄せの影響を与えます。
横幅をぴっちり作ると影響されていることに気が付かないこともあるでしょう。いつかひょっこり悪戯します。
僕も始めて見たときは関係ないのにIE死ねと思ったものです。

予断ですがoverflow:hiddenでclearfixと同じ効果を得られます。
ただしoverflowはフロートを解除するわけではありません。

また、widthとheightを指定していると断ち切ります。
コーディング前にしっかりと考えて併用しましょう！

clearfix以外でフロート解除をする方法はこちら