Question CSS float

<style type="text/css">
body {background-color: blue;}
pic {
top: 0px;
left: 0px;
margin-bottom: 0px;
}
h1 {
margin-top: 0px;
margin-bottom: 0px;
text-align: center;
color: white;
background-color:black;
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif;
}

#nav {
font-family: Verdana, Arial, sans-serif;
font-size: 20px;
padding:5px;
margin:0px;
background-color:#71B8D5;
color:#fff;
border-bottom: 1px solid #6F8C8F;
}

#nav a {
color:#fff;
text-decoration:none;
}
#nav a:hover {
text-decoration:underline;
}
.floatleft
{
float: left;
margin: 0 0 10px 10px;
border: 1px solid #666;
padding: 2px
}
</style>
</head>
<img src="pics/title1.jpg" alt="title" id="pic" />
<h1>Power4sports </h1>
<div id="nav">|<a href="http://www.url/bio.htm">bio</a>|
|<a href="http://www.url/maillist.htm">newsetter</a>|
 |<a href="http://www.url">contact</a>|
  |<a href="http://www.url/mission">mission</a>|
  </div>
  <p>
<img class="floatleft" src="pics/alex.jpg" alt="" width="100" height="100">This is a test
to see how far this code will go and if it will stop into a new para
</p>
</body>
</html>