The original purpose of floats

Let's look at the final project, shown in the following figure. We want to float the image to the left and have the headline and text flow around it:

Let's target that image in CSS. Instead of targeting the image in our selector, let's actually target the image's container, which is this anchor tag with a class of figure:

<a href="#" class="figure"> 

I don't want to just target the .figure class as my selector because I may use this class on other image containers and may not want them all to be floated. So, let's use a descendant selector based on its parent. Its parent is up at the top of the section, the section tag, which has multiple classes: content-block, style-1, and wave-border:

<section id="jaws" class="content-block style-1 wave-border"> 

This is a modular approach that we'll get into more in the next section. The main class we're looking for is content-block. The style-1 and style-2 classes are only controlling the two different color schemes and wave-border adds the repeating background image of the wave to the top of the first section. Finally, in our CSS, our selector is going to be .content-block .figure, so we are targeting any element that has a class of figure inside an element with a class of content-block:

.content-block .figure { 
  margin: 30px; 
} 

So what we'll type in this rule set, under the margin property, is float: left:

.content-block .figure { 
  margin: 30px; 
  float: left 
} 

When we refresh the page, we see that everything has gone to plan. This was almost too simple. We achieved almost exactly what we set out to do in all three sections:

Let's add a background color to h1 and p in our CSS, just to see what's going on here. We'll just give h1 a background color of deeppink and a background color of green via content-block:

.content-block h1 { 
  color: #fff; 
  background-color: deeppink; 
} 
.content-block p { 
  font-family: Georgia, 'Times New Roman' sans-serif; 
  background-color: green; 
} 

Following is the output of preceding code block:

Notice how the backgrounds go behind the image. The text is flowing to the right, but the elements themselves are no longer seeing the floated element, the image, as part of the normal flow. Floated elements themselves change when their display properties are affected. For instance, the anchor tag that was floated, or really the anchor with a class of figure, starts acting like a block-level element. It will now respond to width and margin top and bottom; as we've seen, it already responded to the margin bottom. However, it won't necessarily force a new line. Let's float it to the right, and it should have a very similar effect:

.content-block .figure { 
  margin: 30px; 
  float: right; 
} 

Following is the output of preceding code block: