Mastering CSS

Using the clear property to solve basic problems with floats

We can use the clear property to stop elements underneath the floated element from misbehaving. For instance, let's add the clear property to the paragraph. We'll add clear: both, which clears both left and right floated elements:

.content-block p { 
  font-family: Georgia, 'Times New Roman' sans-serif; 
  background-color: green; 
  clear: both; 
} 

Now, when you refresh, you will see the paragraph text seated below the floated element:

We can do the same thing for h1 and that will sit below:

.content-block .figure {   margin: 30px;   float: right; } .content-block h1 { color: #fff; background-color: ...