Float introduction–flowing text around images

Let's start this chapter with an introduction to floats. We'll talk about the original purpose of floats, followed by the basic problem that they cause and how to clear elements that come after floats. In this section, we'll also start work on a new HTML page about shark movies that you can find in the book download package.

The Shark movies page

Here we have a new HTML page about shark movies. If you look at this page, you'll see an image on top of a title, on top of some text, and on top of a link; as you scroll down, you'll see that there are three sections like that for each of the three movies:

The HTML is fairly straightforward. There are three sections, each with a div tag with a class of wrapper, which is centering the content. Inside the wrapper class, there's an anchor tag with an image inside it. Underneath the anchor tag is an h1 tag containing the title and some paragraph text. This is followed by an anchor tag, which is a link to learn...