// Tutorial //

Understanding CSS Float

Published on June 7, 2019
Default avatar
By William Le
Developer and author at DigitalOcean.
Understanding CSS Float

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

In this article, learn how to use CSS float positioning, as well as some of the pitfalls when using it.

Newbies to CSS usually have a difficult time grasping how float positioning works. This is probably because people tend to overuse it, or many times they’re using a CSS framework that uses it waaaay too much (lookin’ at you Bootstrap v2 👀).

Using float too often can make page layouts unpredictable and prone to breaking. After teaching a bunch of people how to use float, I’ve come up with 3 rules/guidelines to easily understand float.

The 3 Rules

  • Rule #1   Use float for its intended purpose
  • Rule #2   Parents containing float elements will collapse
  • Rule #3   Use clear in conjunction with float

Rule #1:   Use Float for its Intended Purpose

Web design was deeply inspired by print design disciplines, and float is an homage to these roots when a print designer would need to “pull” a visual element to the side while allowing other content to freely flow around it.

Today, this remains a design pattern for websites and, believe it or not, there aren’t any CSS workarounds for accomplishing what float does.

float: right

<p>
  <img class="bitey-img" src="apex-predator.jpeg"/> The alligator is a crocodilian in the genus Alligator of the family Alligatoridae. The two living species are...
</p>
.bitey-img {
  float: right;
}

This was accomplished by simply using float: right;. The browser window can be resized and the text will flow naturally around the image! You can’t accomplish this with Flexbox, position: absolute, or any workarounds. It’s a deceptively powerful feature that only float can do!

You can also use float: left; to pin something to the other side:

float: left

View the code on glitch.com

And… that’s it!

These are really the only pragmatic uses for float. It’s used when you want something to pin an HTML element to the side AND you want content to fill up the empty space around it. If any of these criteria are missing, you’d be better suited using another approach (like CSS Flexbox).


Case-in-point: Old versions of Bootstrap v2, used float rules everywhere in the codebase. For example, the .row-fluid span elements:

Snippet of Bootstrap code

Inevitably people would customize their Bootstrap theme, and then start to see the layout breaking. It was utter chaos! Thankfully the Bootstrap team has largely removed float rules from new releases.

Rule #2:   Parents Containing Floated Elements Will Collapse

In the illustration below, the <div> contains three other <div> elements that have float: left; applied. The parent element has a computed height of 0px because it won’t expand to contain floated elements:

Parent element collapses

This is pretty weird if you’re new to CSS. The containing <div> will only expand for non-floated elements:

Parent elements expends on non-floated elements

View the code on glitch.com

Rule #3: Use Clear in Conjunction with Float

Some CSS rules complement other CSS rules, like font-family and font-size for example. When you reach for one them, you’ll usually use the other. Like two peas in a pod! The same goes for float and clear.

Generally speaking, if you’re going to use float you should consider using clear. Or your layout can break:

The 2nd headline shouldn’t be wrapping the image. Switch to the “View Source” window, and try editing clear: none to clear: both. This fixes the issue, and puts the headline on its own line.

Using clear will make your floated elements predictable, and thus more enjoyable to use! clear can have a value of none (the default), right, left, both, inline-start or inline-end.

Conclusion

The float property has a very special role in CSS. It does something that no other CSS property can do, and if you follow these 3 Rules you’ll be able to leverage float fruitfully in your designs.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
1 Comments

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

You have no idea how helpful this was for me. Blows my mind how poorly these rules are covered in most educational CSS content. Thank you so much for sharing this!