floatとは、指定された要素（<div>とか<p>）を右に寄せたり、左に寄せたりするときに使います。
ウェブサイトで見られるサイドバーやサイドメニューとかもfloatで配置されていることが多いです。

以下の例で説明していきます。

【値】

1⇒float:left;
指定した要素を左に寄せます。

2⇒float:right;
指定した要素を右に寄せます。

3⇒float:none;
特に配置を指定しません。これが初期値になります。
３つがありますが3を使う機会はほぼないので、１と２だけ覚えておくのが良いです。

実際にfloatプロパティを使ってみましょう。

以下のようなHTMLにCSSを適用します。

【例：HTMLソース】

<div class="nyanko1"></div>
<div class="nyanko2"></div>
<div class="nyanko3"></div>

【例：CSS】

.nyanko1{
 width:100px;
 height: 80px;
}
.nyanko2{
 width: 150px;
 height: 120px;
}
.nyanko3{
 width: 200px;
 height: 150px;
}

以上のHTMLとCSSを、ブラウザで確認すると、以下のようになります。

今のままではfloatプロパティを指定していないので、要素が縦並びになっています。
この３つの要素にfloatプロパティを適用していきたいと思います。

【例：HTMLソース】

<div class="nyanko1"></div>;
<div class="nyanko2"></div>
<div class="nyanko3"><1div>

【CSS:float:rightの場合】

.nyanko1{
 width:100px;
 height: 80px;
 float:right;
}
.nyanko2{
 width: 150px;
 height: 120px;
 float:right;
}
.nyanko3{
 width: 200px;
 height: 150px;
 float:right;
}

【表示】

要素が横並びになりました。今回は、横並びにしたい要素が３つなので、３つの要素すべてに「float: right;」を適応しています。
以上がCSS floatプロパティの使い方の例です、このようにfloatを使うことで自由に右や左に移動することが可能になります。
他にもHTML、CSSには多くの要素があります。これからもHTML、CSSについて記事を掲載していきます。

って方は、いらっしゃらないかと思いますが、一応念のため。

clearfixはfloatというプロパティを使用した際に使うCSSですので、floatとワンセットで覚えることが多いです。

ウェブのコーディングをする方で、floatを知らない方もいないかと思いますが、念のため。

floatプロパティは、指定された要素を左または右に寄せて配置する際に使用します。 後に続く内容は、その反対側に回り込みます。

-CSSリファレンスより引用

つまり画像やブロック要素に対して、要素を右や左へ回り込ませるプロパティとなります。

例えば、こんな感じでAとBの要素があるとします。

htmlの構造上、縦に要素は配置されます。
それを横に並べたい場合はfloatプロパティを使用します。

Aの要素に

{float:left;}

を使ってみます。

すると、

こんな感じでBの要素が右へ回り込みます。
ざっくりですが、これがfloatプロパティの効果です。

ご覧の通りfloatはとても便利ですし、デザインを組む上でなくてはならないプロパティです。
ただ、このプロパティはとても影響力があるので、こちらが意図していない要素まで右回りにしてしまうことが多々あります！

例えば、さきほどの例の場合、その下にフッターがあるとします。
こんな感じで。

この状態でうっかり先ほどのようにfloatをかけてしまうと、

あららら～
超フロート状態になってしまいます。フッターまでフロートしちゃって、浮きまくりなレイアウトですよね。

大変です。
でも落ち着きましょう。そんな時に問題を解決するのが、やっと出てきました、「clearfix」です！！

Bの要素は右回りでOKなので、フッターには右回りのプロパティをかけないようにしてみましょう。

clearfixのコードです。
これはこのまま共通のCSSにコピペしてもいいと思います。

.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;
}

で、フッターの要素にこのclearfixのクラスを付けてあげます。

すると、

こんな感じでBの要素にfloatがかかっていますが、フッターにはかかっておらず、そのままの位置に収まっています。

簡単にfloatとclearfixのお話をしました。
ちょっとざっくりすぎた感があるので、また今度詳しく書いていこうと思います。