Tutorial

Understanding CSS Float

Published on June 7, 2019
Default avatar

By William Le

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
William Le

author

Still looking for an answer?

Ask a questionSearch for more help

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!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel