Floats are a great way to wrap and stack content. You can float almost anything, except for items that have absolute or fixed positions, and everything floated behaves like a Block level element.

I often think about floats like a desktop. I can have a stack of things on the left, and a second one on the right. Everything else fills the available space between them.

Here is a basic example to try in codepen or locally:

<main>
  <div class="box red">Box One</div>
  <div class="box green">Box Two</div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quia fugiat veniam quam beatae? Ex quam dicta earum mollitia consequatur error, incidunt, consequuntur iusto est ipsam odio eaque aperiam eius?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quia fugiat veniam quam beatae? Ex quam dicta earum mollitia consequatur error, incidunt, consequuntur iusto est ipsam odio eaque aperiam eius?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quia fugiat veniam quam beatae? Ex quam dicta earum mollitia consequatur error, incidunt, consequuntur iusto est ipsam odio eaque aperiam eius?</p>
  </div>
</main>
.box {
  height: 8em;
  width: 8em;
  text-align: center;
}

.red {
  background-color: red;
  float: left;
}

.green {
  background-color: green;
  float: right;
}

Playing with the width on our browser window, we can see that our content wraps around both the red and the green boxes.

If we change the float value on our green box to left, like so:

.green {
  background-color: green;
  /* changed the float value from right to left */
  float: left;
}

Then both our red and green boxes stack up on the left, and the content wraps around box.

Wrapping

When floated items fill a row, they wrap like text. Try setting main to a width of 10em, like this:

main {
  width: 10em;
}

Now our container is only wide enough for a single box, so everything is rendered in vertical column. If you ever have a case where floated items are rendering on the following line, check the width of your container element and floated items, they may just be too wide to fit!

Source Order

If we switch the order of the green and the content bock, like so:

<main>
  <div class="box red">Box One</div>
  <div class="content">
    <!-- snipped content -->
  </div>
  <div class="box green">Box Two</div>
</main>

We will find the the blocks no longer stack horizontally like before. This is because source order matters! Floats wont be rendered above anything higher than them in the document. Siblings occurring after floated item will fill and wrap around any floated items.

Clearing Floats

What if you want your content to not wrap, but follow after the floated content? Thats why float clearing exists. There are a lot of different ways to clear floats. The easiest is to add clear: both; to the first sibling element after all your floated items. You can just clear a left or right if you need too. Try this arrangement:

<main>
  <div class="box red">Box One</div>
  <div class="box green">Box Two</div>
  <div class="content">
    <!-- snipped content -->
  </div>
</main>
.box {
  height: 8em;
  width: 8em;
  text-align: center;
}

.red {
  background-color: red;
  float: left;
}

.green {
  background-color: green;
  float: right;
}

.content {
  clear:both;
}

This clears both the left and right floated elements, and causes the content block to appear on a new line after both of the cleared elements.

We'll look into other methods of float clearing later.

inherit

Finally, you can pass the inherit property to float, and the element will then inherit its parent's float. In practice this only rarely useful.

Summary

Today we looked at floats and how you can use them to wrap and stack content. Floats are a really useful organizational pattern, and as we'll see later, work great with responsively designed sites. A good exercise is to take the examples and change the source order and left/right settings on the blocks. You'll get a good understanding of floats really quickly with just a few simple changes,

Resources

Josh Adams

I've been building web-based software for businesses for over 18 years. In the last four years I realized that functional programming was in fact amazing, and have been pretty eager since then to help people build software better.

You May Also Like