floatプロパティは、指定した要素を左か右にフロート（浮動）させるか、またはフロートさせないかを指定します。
これにより、後続する内容はフロートボックスの側面に可能な限り流し込まれます。この流し込みを制御するにはclearプロパティの指定をする事で可能です。

画像をフロートさせて、後続するテキストを画像の側面に流し込んだりする場合に活用したり、div要素などをフロートさせ2カラム、3カラムなどのマルチカラムレイアウトにも使用します。
仕様が複雑だったり、ブラウザのレンダリングの違いやバグに遭遇し易いため、CSS2.1のプロパティの中では最も厄介なプロパティの一つですが、自由なレイアウトを組むうえで必須のプロパティと言えます。

また、floatプロパティを扱う上で欠かせないのがclearプロパティですので、合わせて読んで頂ければと思います。

と、言う事でこのページでも頑張って書いてますが、floatプロパティに関しては色んなサイトや書籍でも度々説明されているので色々読んで理解してもらえればと思います。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

left｜right｜none｜inherit

初期値

none

適用される要素

全ての要素（ただし、displayプロパティ及びpositonプロパティの指定によっては適用されません）

継承

しません

パーセント値

N/A

メディア

visual

値の解説

left

左にフロートするブロックボックスを生成します。後続する内容は可能な限り右側の上から流し込まれます。

right

leftと同様で左右逆になります。
右にフロートするブロックボックスを生成します。後続する内容は可能な限り左側の上から流し込まれます。

none

ボックスは、フロートしません。

フロートボックスの横幅に関して

フロートボックスの横幅は、widthプロパティによって横幅が明示されていればその横幅になります。
widthプロパティの指定がない場合、置換要素（img要素など）はその横幅が流用され、非置換フロートボックスは「内容にぴったりフィットする幅」が採用される事になっています。この、内容にぴったりフィットする幅の実装具合がブラウザによりまちまちで、思ったように組めない事が多々あるので、できるだけwidthプロパティを指定して、横幅を明示しておきます。

なお、CSS2の仕様では横幅の明示が必要とされ、横幅が不明な場合の横幅は0とみなされていましたが、CSS2.1の仕様で横幅の明示が必要の項は無くなり、横幅が明示されていない場合「内容にぴったりフィットする幅」になるようになりました。

img要素にfloatプロパティの指定をした場合のサンプル

まずは簡単なサンプルとして、img要素にfloat: left;の指定をした場合のサンプルです。

p.sample01 {
  margin: 20px;
  width: 300px;
  background: #efefef;
}

p.sample01 img {
  float: left;
  margin: 0 10px 10px 0;
}

<p class="sample01">
<img src="/img/item/ponta.jpg" alt="写真：ぽんた" />
まずは簡単な...（略）
</p>

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

まずは簡単なサンプルとして、img要素にfloat: left;の指定をした場合のサンプルです。
このテキストが、写真の右側に流し込まれているのが確認できるかと思います。現在、img要素がフロートボックスとなっている訳ですが、テキストがフロートボックスの高さを超えた場合、そのテキストは通常の横幅で表示されます。

img要素に回り込むような感じでテキストが流れ込んでいるのが確認できます。
次はこのサンプルをちょこっと変更して、CSSは同じでテキストを短くした場合のサンプルです。

サンプルのブラウザ上の表示

img要素にfloat: left;の指定をした場合のサンプルです。

IE6, 7 で閲覧している場合は、p.sample01にwidth: 300px;の指定が有るため、hasLayoutが「true」になるので、p.sample01の背景色がフロートボックスの高さに揃っていますが、他のブラウザではテキストの高さまでしか背景色が見えません。
このような場合、フロートボックスの高さに合わせて背景色も表示されたいと思う事が多いため、IE6, 7 がメインブラウザの場合、他のブラウザがおかしい（意図した表示と違う）と思ってしまう事も有りますが、他のブラウザが仕様通りの表示をしています。
これを同じような表示にするには、何らかの要素にclearプロパティの指定をして流し込みを制御する必要が有ります。

これだけ簡単なサンプルでもIE6, 7 は表示が違ってくる訳ですが、それはさておき、フロートボックスはこのように「浮いた」感じになります。
フロートと言うだけ有り、コーヒーフロートのバニラアイスやソフトクリームのようにぷかぷかしてるイメージ↓が分かりやすいかも知れません！

写真のサイト：CAFE NOBLE（カフェノーブル）｜Arrange Coffee

どーしても、コーヒーフロートの写真が使いたかったので適当に探した写真ですが、こうやって写真を見てると飲みたくなります...
で、こんな風に浮いたようなイメージをしていただくと、先ほどのサンプルの背景色がテキストの高さまでしか表示されなかったのが分かるかと思います。（実際に浮いている訳では有りませんが）

複数のフロートボックスが並んだ場合のサンプル

写真の一覧や、コンテンツの一覧を並べたりする際に、ボックスをフロートさせて並べたいって事はよく有るかと思います。

.itemArea01 {
}

itemArea01 .item {
  float: left;
  width: 160px;
  margin: 10px;
  background: #aa7;
  color: #fff;
}

<div class="itemArea01">

<div class="item">
<p>フロートボックスが並んでます。</p>
</div>
<div class="item">
<p>フロートボックスが並んでます。</p>
</div>
<div class="item">
<p>フロートボックスが並んでます。</p>
</div>
<div class="item">
<p>フロートボックスが並んでます。</p>
</div>
<div class="item">
<p>フロートボックスが並んでます。</p>
</div>

<!-- / .itemArea --></div>

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

フロートボックスが並んでます。

フロートボックスが並んでます。

フロートボックスが並んでます。

フロートボックスが並んでます。

フロートボックスが並んでます。

複数のフロートボックスが並んでいるのが確認できると思います。
ここでよく見て欲しいのがマージンです。
.itemに指定しているマージンの値は4辺とも10pxで、通常フローなら垂直マージンは相殺されますが、フロートボックスの場合マージンは相殺されません。その為、上下のマージンが20pxになってしまいます。
このままでは、10pxと20pxのマージンが混在して気持ち悪いので気持ち良くするためには次のような指定をします。

.itemArea02 {
  _zoom: 1;
  overflow: hidden;
  padding: 10px 10px 0;
}

.itemArea02 .item {
  float: left;
  width: 160px;
  margin: 0 10px 10px 0;
  background: #ccf;
}

.itemのマージンの指定を右と下のみにし、親要素の.itemArea02にpaddingプロパティの指定をする事で各余白が10pxになるように調整しています。また、overflow: hidden;の宣言は、高さを算出させる為の指定です。これに関しては、overflowプロパティを参照してください。
HTMLソースは、div要素のclass名がitemArea01からitemArea02に変更しています。

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

フロートボックスが並んでます。

フロートボックスが並んでます。

フロートボックスが並んでます。

フロートボックスが並んでます。

フロートボックスが並んでます。

これで、一見気持ちよく並んだように見えますが、IE6, 7で見ると.itemに指定している下マージンが適用されていません。
これに対応するために、下マージンではなく上マージンで余白を調整し、親要素のpaddingプロパティの指定も変更します。

.itemArea03 {
  _zoom: 1;
  overflow: hidden;
  padding: 0 10px 10px;
}

.itemArea03 .item {
  float: left;
  width: 160px;
  margin: 10px 10px 0 0;
  background: #fcf;
}

HTMLソースは、div要素のclass名がitemArea02からitemArea03に変更しています。
このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

フロートボックスが並んでます。

フロートボックスが並んでます。

フロートボックスが並んでます。

フロートボックスが並んでます。

フロートボックスが並んでます。

上下の指定を入れ替えたことで、IE6, 7でも同じように表示されます。
こんな感じでfloatプロパティを使う事と、IE6, 7はマージン関連のバグが色々出てくるので注意が必要です。

フロートの厳密なルール

floatプロパティの簡単なサンプルを見たところで、次は厳密なルールに関してです。
フロートの配置方法には以下の厳密なルールが定められています。（説明は左フロートですが右フロートの場合は左右を読み替えてください）

1. 左フロートボックスの左外辺は、包含ブロックの左辺より左に配置されてはいけない。
2. あるボックスが左フロートし、ソース上先行する要素も左フロートボックスの場合（左フロートボックスが2つ以上有る場合）、後のボックスは前のボックスの右外辺より右に配置するか、下外辺より下に配置しなければならない。
3. 左フロートボックスの右外辺は、その右に隣接する右フロートボックスの左外辺より右に配置されてはならない。
4. フロートボックスの上外辺は、包含ブロックの上辺より上に配置されてはいけない。フロートボックスが、相殺されている2つのマージン間にある時は、フロートボックス以外を含まない匿名ブロックの親が存在しているように配置される。
5. フロートボックスの上外辺は、ソース上先行する要素が生成したブロックまたは、フロートボックスの上外辺より上に配置されてはならない。
6. フロートボックスの上外辺は、ソース上先行する要素が生成したボックス内の行ボックスの上辺より上に配置されてはならない。
7. あるボックスが左フロートし、ソース上先行する要素も左フロートボックスの場合（左フロートボックスが2つ以上有る場合）、後のボックスが包含ブロックの右辺より右に配置されてはならない。
8. フロートボックスは可能な限り上方に配置される。
9. 左フロートボックスは可能な限り左方に配置されなければならない。ただし、前述の「可能な限り上方に配置される」が優先される。

これらのルールに加え、フロートボックス自身にclearプロパティの指定が有った場合、次のルールが加わります。

1. clear: left;が指定されたフロートボックスの上外辺は、先行する全ての左フロートボックスの下辺よりも下に配置されなければならない。（値が、right、bothの場合も同様です）

こんな感じでフロートの配置方法が決められています。
なにやら小難しく書かれていますが、よーく読んでみるとそれほど難しい事は書かれておらず、1～3、7は、複数のフロートボックスがあった場合、フロートボックスの横幅の合計が包含ブロックより大きくなると、最後のボックスから下に移動していくとなっています。
また、4～6は、フロートボックスの配置上限を定めており、フロートボックスは包含ブロックより上には配置されず、先行するボックスが有る場合は、それよりも上に配置できないとなっています。

フロートの配置などに関してより詳しく調べたい方は、The Web KANZAKIの「3.2.3 浮動化と周囲のボックス」とその前後の解説が非常に参考になります。