Understanding CSS Float

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.

<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:

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:

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:

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

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.