フロートの練習

左寄せとoverflow: hidden;

重なりが見えやすいように色のついたボックスを少し透かせています。

#float1 .pink

#float1 .blue

#float1 .yellow
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

1.#float1 .pinkに{float:left;}を設定: →ピンクが浮いてその下に水色が潜り込んで文字が追い出されてしまう
2.#float1 .blueに{float:left;}を設定: →水色が浮いてその下に黄色が潜り込んで文字が追い出されてしまう
3.#float1 .yellowに{float:left;}を設定: →3つが並ぶが、親要素の中身が全て浮いてしまったために空っぽになり、高さがなくなって背景のグレーがみえなくなってしまう
4.#float1に{overflow: hidden;}を設定: →見えた！しかし黄色ボックスの中のはみ出たテキストが見えなくなった…

overflow: hidden;は本来「はみ出た部分を表示しない」という意味なので、何かが1pxでもはみ出したらレイアウトが崩れます。
そもそも本来の使い方ではないので、よく思われないかもしれません

重なりが見えやすいように色のついたボックスを少し透かせています。

#float2 .pink

#float2 .blue

#float2 .yellow
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

1.#float2 .pinkに{float:right;}を設定: →ピンクが浮いて右側に
2.#float2 .blueに{float:right;}を設定: →水色が浮いて右側に、黄色が上に上がってくる
3.#float2 .yellowに{float:right;}を設定: →3つが並ぶが、親要素の中身が全て浮いてしまったために空っぽになり、高さがなくなって背景のグレーがみえなくなってしまう
4.4番目に、ピンク、水色、黄色のボックスを支えるための空のボックス（div class="clear"）を作り、{clear: both;}を設定: →見えた！
※今回はこのボックスを可視化するために高さと背景色を設定していますが、本来は必要ありません。

今回のようにフロートしない要素がない場合、中身のない空のボックスを作らなくてはならず、これもしっくりきませんね…。
下の例のように下から支えるボックスが元々ある場合は一番いい方法だと思います。

よくあるフロートレイアウト（サイドバーとメインコンテンツを横並びにする）

main
{float: right;}

重なりが見えやすいように色のついたボックスを少し透かせています。

#float3 .pink

#float3 .blue

#float3 .yellow
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

1.#float3 .pinkに{float:left;}を設定

→ピンクが浮いてその下に水色が潜り込んで文字が追い出されてしまう

2.#float3 .blueに{float:right;}を設定

→水色が浮いて右側にいき、上に上がってきた黄色がピンクの下に潜り込んでしまう

3.#float3 .yellowに{float:right;}を設定

→3つが並ぶが、親要素の中身が全て浮いてしまったために空っぽになり、高さがなくなって背景のグレーがみえなくなってしまう

4.#float3にclass="clearfix"を設定

→見えた！

.clearfix:after{
content: "";
display: block;
clear: both;
}

reset.cssに上のコードを記述しておき、該当のHTMLタグ（親要素）に
<div id="float3" class="clearfix">
のようにクラス名をつけるだけです。

常にreset.cssに記述しておけば、クラス名を追記するだけで適用できるため、一番楽、かつ文法上でもスマートな記述だと思います。