http://www.cssnewbie.com/css-float-property/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Newbie Example: Understanding CSS Floats</title>
<style>
/* Non-example-related stuff. */
body {
font: small/1.4 Arial, Helvetica, sans-serif; }
#wrap {
width: 400px;
margin: 0 auto; }
/* Example CSS starts here. */
.container {
margin: 1em 0;
border: 2px solid red;}
.container.float {
width: 396px; }
.float {
float: left; }
.clear {
clear: left; }
img {
border: 2px solid green;
margin: 0 .5em 0 0; }
h2 {
clear: left;
margin: 1em 0 0; }
</style>
</head>
<body>
<div id="wrap">
<h1>Understanding CSS Floats</h1>
<p>CSS floats can be a tricky topic to understand. Here are a few examples to help explain how floats interact with their surrounding elements. Our containing div has a red border, while our image has a green border.</p>
<p><a href="http://www.cssnewbie.com/css-float-property/">See the original CSS Newbie article here.</a></p>
<h2>Normal Document Flow</h2>
<div class="container">
<img src="http://farm3.static.flickr.com/2314/2273672714_2a0d8dd526_m.jpg" />
<p>This paragraph is inside a div and follows an image. The image is not floated, so this is the normal document flow.</p>
</div>
<h2>Floated Image</h2>
<div class="container">
<img src="http://farm3.static.flickr.com/2314/2273672714_2a0d8dd526_m.jpg" class="float" />
<p>In this example, the image has been floated to the left. Notice how the document flow has changed: our text is wrapping around the image, but our container is only as tall as our non-floated element requires.</p>
</div>
<h2>Clear Following a Float</h2>
<div class="container">
<img src="http://farm3.static.flickr.com/2314/2273672714_2a0d8dd526_m.jpg" class="float" />
<p>Here our image has been floated, which makes the text wrap around, but now we've done something different.</p>
<p class="clear">This paragraph has been cleared, which changes the size of our containing element yet again.</p>
</div>
<h2>Float Within a Float</h2>
<div class="container float">
<img src="https://icons.duckduckgo.com/i/ae6e124c.jpg" class="float" />
<p>In this example, both our container and the image are being floated. Notice that the image now defines the height of the float!</p>
</div>
<p>Photo by Auzigog. Used under a Creative Commons license. <a href="http://www.flickr.com/photos/eyermonkey/2273672714/">See the original here.</a></p>
</body>
</html>