floatの動きが理解できません。

HTML5&CSS3標準デザイン講座第二版のfloatで3カラムつくるというのを勉強しています。
floatを指定したときの、その要素のスタート位置の定義がわかりません。

#テキストのHTML・CSS

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>３カラムレイアウトサンプル</title>
6<link rel="stylesheet" href="style1.css" media="all">
7</head>
8
9<body>
10<div id="wrap">
11  <header id="header">ヘッダー領域<br>ヘッダー領域<br>ヘッダー領域</header>
12  <section id="cont1">
13    <p>コンテンツ１が入ります。コンテンツ１が入ります。コンテンツ１が入ります。コンテンツ１が入ります。コンテンツ１が入ります。コンテンツ１が入ります。コンテンツ１が入ります。コンテンツ１が入ります。</p>
14    <p>コンテンツ１が入ります。コンテンツ１が入ります。コンテンツ１が入ります。コンテンツ１が入ります。コンテンツ１が入ります。コンテンツ１が入ります。コンテンツ１が入ります。コンテンツ１が入ります。</p>
15    <p>コンテンツ１が入ります。コンテンツ１が入ります。コンテンツ１が入ります。コンテンツ１が入ります。コンテンツ１が入ります。コンテンツ１が入ります。コンテンツ１が入ります。コンテンツ１が入ります。</p>
16  <!-- /#cont1--></section>
17  <section id="cont2">
18    <p>コンテンツ２が入ります。コンテンツ２が入ります。コンテンツ２が入ります。コンテンツ２が入ります。コンテンツ２が入ります。コンテンツ２が入ります。コンテンツ２が入ります。コンテンツ２が入ります。</p>
19    <p>コンテンツ２が入ります。コンテンツ２が入ります。コンテンツ２が入ります。コンテンツ２が入ります。コンテンツ２が入ります。コンテンツ２が入ります。コンテンツ２が入ります。コンテンツ２が入ります。</p>
20    <p>コンテンツ２が入ります。コンテンツ２が入ります。コンテンツ２が入ります。コンテンツ２が入ります。コンテンツ２が入ります。コンテンツ２が入ります。コンテンツ２が入ります。コンテンツ２が入ります。</p>
21  <!-- /#cont2 --></section>
22  <section id="cont3">
23    <p>コンテンツ３が入ります。コンテンツ３が入ります。コンテンツ３が入ります。コンテンツ３が入ります。コンテンツ３が入ります。コンテンツ３が入ります。コンテンツ３が入ります。コンテンツ３が入ります。</p>
24    <p>コンテンツ３が入ります。コンテンツ３が入ります。コンテンツ３が入ります。コンテンツ３が入ります。コンテンツ３が入ります。コンテンツ３が入ります。コンテンツ３が入ります。コンテンツ３が入ります。</p>
25    <p>コンテンツ３が入ります。コンテンツ３が入ります。コンテンツ３が入ります。コンテンツ３が入ります。コンテンツ３が入ります。コンテンツ３が入ります。コンテンツ３が入ります。コンテンツ３が入ります。</p>
26  <!-- /#cont3 --></section>
27  <footer id="footer">フッター領域<br>フッター領域<br>フッター領域</footer>
28</div>
29</body>
30</html>
31

CSS
1
2@charset "UTF-8";
3/* CSS Document */
4
5*{
6  margin:0;
7  padding:0;
8}
9
10#wrap {
11  width: :949px;
12  margin: 30px auto;
13  background-color: beige;
14}
15
16#header {
17  background-color: lightpink;
18}
19
20#cont1 {
21  background-color: palegreen;
22  width: 300px;
23}
24
25#cont2 {
26  background-color: skyblue;
27  width: 300px;
28}
29
30#cont3 {
31  background-color: plum;
32  width: 300px;
33}
34
35#footer {
36  background-color:  gold;
37}
38

テキストでは、ここからコンテンツに順にCSSにfloat leftを付け加えていき、最後にfooterでclear bothとするように指示があります。
やっていくとこんな感じになります。

#テキスト3カラム完成形

css
1@charset "UTF-8";
2/* CSS Document */
3
4*{
5  margin:0;
6  padding:0;
7}
8
9#wrap {
10  width: :949px;
11  margin: 30px auto;
12  background-color: beige;
13}
14
15#header {
16  background-color: lightpink;
17}
18
19#cont1 {
20  background-color: palegreen;
21  width: 300px;
22  float: left;
23}
24
25#cont2 {
26  background-color: skyblue;
27  width: 300px;
28  float: left;
29}
30
31#cont3 {
32  background-color: plum;
33  width: 300px;
34  float: left;
35}
36
37#footer {
38  background-color:  gold;
39  clear: both;
40}

なるほどと思ったのですが、いろいろ試しているうちにfloatの動きがわからなくなりました。
#わからないこと
この一連の流れをやってみて、一カ所だけにfloatを指定したらどうなるのかやっていると、理解できない部分がでてきました。
##cont2（青)の部分だけにfloat leftした場合の動きについて

css
1@charset "UTF-8";
2/* CSS Document */
3
4*{
5  margin:0;
6  padding:0;
7}
8
9#wrap {
10  width: :949px;
11  margin: 30px auto;
12  background-color: beige;
13}
14
15#header {
16  background-color: lightpink;
17}
18
19#cont1 {
20  background-color: palegreen;
21  width: 300px;
22}
23
24#cont2 {
25  background-color: skyblue;
26  width: 300px;
27  float: left;
28}
29
30#cont3 {
31  background-color: plum;
32  width: 300px;
33}
34
35#footer {
36  background-color:  gold;
37}