CSS – Introducing float

The float property was originally introduced to allow text to flow around image elements – thus eliminating a lot of white space and making for more esthetically pleasing documents.

Contents

1. float
2. Practical Considerations
3. Summary
4. Playing Around
5. References

float

The float property can take the values of left, right or none. By default, all HTML elements have float set to none.
Consider the following code snippet which places an image on the left side of some text:

<p><img src="26-dog.jpg">Without floating the image,
    there is a lot of vertical white space along the
    side of the image. It is not esthetically pleasing.
  </p>

Without floating the image, you have a lot of vertical white space along the side of the image. It is not esthetically pleasing.

Consider the same image to which float:left has been applied:

When you apply float to the image, the text flows around the image. You no longer get a lot of ungainly white space.
Of course, some additional padding or margin should be applied to the image or text so the text doesn’t hug the image so closely.
Overall, it looks nicer.

A similar effect is obtained when float:right is applied to the image:

When you apply float to the image, the text flows around the image. You no longer get a lot of ungainly white space.
Of course, some additional padding or margin should be applied to the image or text so the text doesn’t hug the image so closely.
Overall, it looks nicer.

Practical Considerations

While it seems to work well, it has problems that become evident for anything but the simplest of layouts.
Consider the following styling:

.border {
    border: solid 2px black;
  }
  
  .yellow-bg {
    background-color: yellow;
  
  }
  
  .lime-bg {
    background-color: lime;
  
  }
  
  .orange-bg {
    background-color: orange;
  
  }
  
  .cyan-bg {
    background-color: cyan;
  
  }
  
  .float-left {
    float: left;
  }

Applied to the following HTML code:

<p id="paragraph1" class="border yellow-bg">
    <img src="26-dog.jpg" class="float-left">
    To make the problem stand out, each paragraph is
    uniquely identified and has a border and background
    colour styling applied.</p>
  
  <p id="paragraph2" class="border lime-bg">
    It should be immediately obvious that the image is
    no longer contained within the paragraph it was
    embedded.</p>
  
  <p id="paragraph3" class="border orange-bg">
    In fact, it is spilling over several paragraph
    blocks, as if it were laid on top of them.</p>
  
  <p id="paragraph4" class="border cyan-bg">
    But it doesn't cover up the words or content.
   </p>

Gives the following results:

In the next tutorial, we will learn why this happens and what we can do about it.

Summary

1. The float can be used to position an element to the left or right side of a page.
2. Content (usually text) will flow around the floated element.

Playing Around

The best way to learn is to play around with what you have learned.
Try using float. The easiest and most visual way is to use small images, although you can also create coloured boxes and use those.
Apply it to a single HTML element, to multiple HTML elements. What happens when you nest floated elements?
The idea is to get a feel for how float behaves when you use it.

References

1. float