You Don’t Need CSS Floats (Mostly)
Limiting the use of floats in your CSS will simplify your UIs, make them more reliable and markup-agnostic, and remove the need for many layout-based hacks.
I’m not going to put a blanket ban on floats in this article. Dogma hampers your ability to see the big picture, and there are occasions when CSS’s float property is legitimately useful.
The problem with using floats is that most of the time you really don’t need them, and your life becomes drastically easier when you understand the limitations, and your alternatives.
When Floats Are Useful
Before I get to the downfalls of floats, it’s only fair to review when they are useful.
When outputting WYSIWYG content on a page, content editors are likely going to want to add images to content, and have text wrap around some of those images.
Adding a float to an image will allow text to wrap around it.
The Media Object
The media object is a fantastic component – popularised by Nicole Sullivan – that relies on a float to achieve its layout. The media object allows you to display an element, usually an image, on the left of a body of text, while preventing text-wrapping. Once you’re familiar with the media object, you’ll notice it everywhere.
float: left; is used on the element containing the
img to produce a column of non-wrapping text. We can even reverse the media object with the same HTML structure by using
When Floats Are Not So Useful
Now that we’ve seen how the
float property can be useful, let’s look at its dark side.
At first the
float property appears quite innocuous. You need an element on the right of its container? Add
float: right; to it – job done!
You’ve just opened up a world of pain, whether you realise it or not. That one little property forces you to do a bunch of extra work to counteract its effects on neighbouring elements.
Breaking Document Flow
The first thing to notice about floats is that they break the flow of the document in seemingly unexpected ways.
Similar to how using
position: absolute; on an element will result in its parent collapsing that element’s vertical space, so too does this happen with floats, resulting in some awkward scenarios.
imgs in the above demo are floated right. In the first example we can see how the
img overflows its container. In the second, not only does it overflow, but it also disrupts the flow of an adjacent block of text!
Sure, we can eliminate this with a clearfix on a container, but do we want to do this every single time we float an element? What if we could always avoid hacking our layout to behave as it should? A hack doesn’t get its name for being a good practice.
Awkward Horizontal Stacking
Floated elements of varying heights also pose problems for reliable layouts.
Instead of stacking at the left of a container as horizontal space runs out, floated elements will stack on each other should they hit another floated element whose height hasn’t been cleared by its subsequent siblings.
A collapsed container, and a nastily stacked layout – what a mess! A clearfix won’t even solve all our problems. Right here is a good reason to be dissatisfied with float-based grid systems.
Lack Of Vertical Alignment
Floated elements don’t respect vertical alignment.
The demo below will allow you to interact with 3 inline-block-level elements and vertical alignment when float values are toggled:
You can see that with a
float applied that none of the
vertical-align values have any effect. This is a substantial drawback – a grid system can do great things with vertical alignment when floats are no longer a factor.
float: right flips the order of our elements. We’d have to reverse the order of elements in our markup to counter this – hacking our layout again!
Let’s Do This A Better Way
One of our options is to continue working with floats and use clearfixes where we can. This can only get us so far, and doesn’t resolve vertical alignment and horizontal stacking problems.
I’ve written about understanding CSS display properties, and this is where we can now leverage the fundamentals of inline-block-level elements to create reliable UIs and components.
The majority of our power will come from
Flexbox is superior to inline-block in many ways, but I’m not going to get into the
flex properties here. The ideas for horizontal stacking translate well from inline-block-level elements to flex-level elements, anyhow.
Flexible Horizontal Alignment
Firstly, if you ever want to horizontally align something – a logo, a button, a link; anything – you’re better off using
text-align on a parent element.
If you need a combination of elements horizontally and vertically-aligned, the most effective strategy is almost always to use a combination of
The layout flexibility in the above demo is just not possible with floats.
By utilising text alignment, we also eliminate the reversed element order that floating our elements right would have, too.
Reliable Horizontal Stacking
By replacing floated elements with
inline-block elements we create a more reliable stacking context for our UIs, and we get all the benefits of vertical alignment too.
The demo below shows a predictably stacked set of components using
The layout above doesn’t come as a surprise, as the layout using floats does. Eliminating surprises makes a UI easier to understand, build, and maintain.
Sure, there are a few quirks with how
inline-block elements interact with whitespace, but there are some creative ways in which we can work around them. The compromise in dealing with whitespace issues provides far more value than does relying on floats to produce a flawed layout.
We could even forego all whitespace issues by using
flexbox should our projects allow!
There really is little need for floats in your CSS, and your stylesheets will be better off without them. Layouts become easier to manage, are more predictable, and are faster to build.
Outside of the media object, I haven’t had to use a float or clearfix in years.
And it feels great.