loading...
Cover image for Anyone here still using CSS Floats?

Anyone here still using CSS Floats?

luisaugusto profile image Luis Augusto Updated on ・1 min read

Since the introduction of grids and flexbox, I have pretty much removed floats from my vocabulary. The only situation in which I would use them would be with positioning images next to wrapping text. Are there any other situations you have run into where floats were a better solution than other alignment tools?

Discussion

pic
Editor guide
Collapse
tomstreeter profile image
Tom Streeter

Read enough about the history of technology and you’ll run into the story of something being invented for one specific thing that morphs into something else when people figure out it can sorta-kinda do something else that people really want to do. Before it’s all over it’s not unusual for people to forget the original function. The notion of the float was originally limited to flowing text around images and other replaced items. It was only ever supposed to be a a one-trick pony. That they ever got used for anything else was a hack. And I mean that without being pejorative about it. Being old as dirt, I remember the frustration folks coming from print had with layout on the web. Remember that the impetus for HTML 1 (though it never had a number) was for the rapid exchange of scientific papers. Absent the float’s ability to kinda-sorta help do sorta columnar layouts, it’d probably be relatively obscure.

I just thank whatever deity is out there that no one came up with an alternate use for the Blink HTML element.

Collapse
rad_hombre profile image
Matthew Orndoff

Reminds me of what happened with the table element.

It was designed to display tabular data.

But soon everyone figured out you could do entire page layouts with it.

Dark times.

Collapse
luisaugusto profile image
Luis Augusto Author

That technique is still used today for email layouts, I'm just glad there are more tools out there today that build them for you.

Collapse
adam_cyclones profile image
Adam Crockett

we will remember you... Oh wait

Collapse
waylonwalker profile image
Waylon Walker

Flexbox is my hammer that I use for everything. I still support IE for some things, and its a godsend that it mostly works without fuss in IE. Eventually it will go away and I will give grid some more thought.

After doing flexbox-zombies a few years back flexbox is drilled into my brain and just feels natural.

Collapse
felipechalreo profile image
Felipe Chalreo

I believe there is a place for floats, just like grid doesn't replace flexbox...

Collapse
luisaugusto profile image
Luis Augusto Author

That's true, there's just a smaller use case nowadays. Flexbox has only been available for around 10 years or so, floats were definitely more prevalent before then

Collapse
bugsysailor profile image
Bugsy Sailor

I still use float:left/right for ul li all the time.

Collapse
cchana profile image
Charanjit Chana

I guess we don't know the context, but display:inline-block is an alternative which you can combine with text-align:left/right

Collapse
kaushikrishi profile image
Kaushik Rishi

Why not bootstrap class unstyled?

Collapse
bugsysailor profile image
Bugsy Sailor

I’ve never used Bootstrap, and have never found the inspiration or desire to try it.

Collapse
iwaniukooo11 profile image
Mateusz Iwaniuk

No, In the era of flexbox, grid or even CSS Frameworks, using floats is like traveling with Fiat 126p :D

Collapse
tchaflich profile image
Thomas C. Haflich

I've dealt with floats a lot in legacy software, or when someone needs to support a ridiculous set of browsers (IE6? In MY 2018? It's more likely than you think!)

If I see them in more modern development, it's a red flag. Aside from, as you said, wrapping text around images / pull quotes / etc, which is what floats are for.

Collapse
patarapolw profile image
Pacharapol Withayasakpunt

You have found a good use of Float. Thanks.

Otherwise, I'd be using Flexbox.

Collapse
gnmonsour profile image
oldishBaker

I found value for float in using, customizing Materialize components ie. fab, chips..., other than this I gave up on float a long time ago.

Collapse
maxgrafx profile image
maxgrafx

not for quite some time. flexbox and css grid solves allot. But good use case

Collapse
michaelandreuzza profile image
michael-andreuzza

Me too on Bulma. is-pulled-right/left.

Collapse
lynnewritescode profile image
Lynne Finnigan

Nope, I haven’t used floats in a long time other than text wrapping round an image. Most sites I build require IE11+ support so there is no need for using floats.

Collapse
basicr profile image
P Pamplona

yes, a lot