Floats

Introduction

You’ve already learned how to place items side-by-side using the CSS display property.

In Example 1 below, two div elements are styles to look like boxes and use display: inline-block to update their styles to make them appear side-by-side.

By default, the paragraph text after the divs does not also appear on the same line. The p element is a block element and takes up the full width of space allotted to it, regardless of the behavior or width of any inline-block elements before or after it.

Even changing the styles on that paragraph to be inline-block would not force it to be next to the divs because the text is so long. You would need to set a fixed width on the p element to get this effect – and even then it wouldn’t wrap around the divs, it would just appear like another block next to them (see Example 2; if you mouse/hover over the paragraph in this example, its border will display so you can better visualize things).

When you want text to play nicely with other inline elements, CSS like this may not be your best bet. There is a property separate from display that will change the layout properties of an element in such a way that text and other elements will wrap around it. This is a common technique in magazine articles, for example.

Using float

To get this effect, you use the float property. In Example 1 below, the div elements have the following CSS added to them:

div {
  float: right;
}

As a result of the float property, both div elements are side by side and now the text actually wraps around the divs.

In Example 2 above, another div has been added around the boxes and that div is floated to the left with the following CSS:

div {
  float: left;
  text-align: center;
  width: 20%;
  min-width: 152px;
}

In this way, float allows you to do things with elements that are not possible with other CSS properties (like display or text-align).

Impact of floated elements on your layout

It is important to know that float makes some significant changes to your page layout and can definitely have unintended consequences.

In Example 1 below, the image is floated to the left and because it is taller than its parent element and the text next to it, the image “escapes” from the parent element (which has a blue background and blue border to make it easy to identify).

This “escape” is only possible because the image is floated and is no longer part of the normal document flow. In order to guard against this, it is necessary to “clear” your floats. There is a separate CSS property named clear that is intended for this purpose but is generally inadequate. 👎🏻

Instead, front end developers rely on a hack known as clearfix; consider it the new and improved version of clear.

The code for clearfix looks like this:

/* Corrects the layout around floated elements */
.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}
.clearfix::after {
  clear: both;
}

🤔 It’s not critical to understand exactly how this code works at this point; it’s more important to understand the effect in the browser.

To use this code, this CSS must be in your stylesheet and the clearfix class must be applied to the parent element of the floated element; in this case, that’s the section element that wraps around the heading, image and paragraphs:

<section class="clearfix">
  <h3>Sunflowers</h3>
  <img
    src="sunflower.png"
    alt="A large sunflower in a field of sunflowers under a bright blue sky."
  />
  <p>Some content here...</p>
</section>

💡 Remember that you can always investigate the code of any Glitch embeds by clicking “View Source” or remixing them to experiment with the code.

Review

float is awesome and effective – but it has a very limited use case.

• If you want things to be side-by-side, you should use the display property.
• If you want text to wrap around something, you should use float and remember that you must use the clearfix hack on the parent element of all floated elements.
• The three values of float are:
  • left or right (demonstrated above)
  • none (to cancel out a previously set float)
  • ❌ There is no float: center;

Because floated elements can have such a wacky effect on your layout, it is important to use them in a considerate way and not to solve all your layout issues.