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?
Top comments (27)
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.
Reminds me of what happened with the
tableelement.It was designed to display tabular data.
But soon everyone figured out you could do entire page layouts with it.
Dark times.
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.
we will remember you... Oh wait
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.
Flexbox-zombies
Waylon Walker ・ Jan 15 ・ 6 min read
Late to the party but the "senior" dev at my job still uses
floatfor layouts and it makes my brain hurt so bad every time I see it. How do I persuade "senior" dev to refrain from doing so and research/learn modern technologies (Flexbox, Grid) that help us be better and more efficient? -__-I also still use float for things that cannot be achieved with flexbox and CSS grid. Let me know if you can achieve what I did here without float: dev.to/afif/responsive-hexagon-gri... (this is one example among many complex layouts I can do with float). Flexbox and CSS grid are not magic tools for everything
Yes that's a cool layout but Grid and Flexbox are for practical applications and higher level layouts. This hexagon 'grid' is likely NOT something someone will use frequently – It's an edge case which I see
floatcan be useful.that hexagon is only one example and you consider it as an edge case but it's not. You are probably working around "classic" rectangular layouts but the internet is full of complex layouts using complex shapes that only flexbox and grid cannot achieve alone.
Pleas list and link any fortune 500 company that uses this type of hexagonal grid. In my line of work (e-commerce) UX/UI is of great importance. This hexagonal grid has no place in my world. Maybe it has a place in your world, but not mine and that's OK. I haven't run across 1 web page in my recent memory that uses anything remotely like this and that's OK too.
like you said : in your world ;) so this doesn't make it an edge case. The internet world is bigger than your and my world.
PS: That hexagon grid is only one example among many.
in MOST worlds. I would say that MORE sites that exist DO NOT need nor employ HEXAGON grids to production. Again... direct me to any fortune 500 site that uses it. I'm pretty sure you can't even find 1 site. Go on.. I'll wait.
I don't even know what fortune 500 means ;) and we are clearly not in the same world so it's useless to give you some examples that you will not consider.
PS: that hexagon grid was one random example I pick but I think it's also useless to show you more example of layout using float.
I believe there is a place for floats, just like grid doesn't replace flexbox...
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
No, In the era of flexbox, grid or even CSS Frameworks, using floats is like traveling with Fiat 126p :D
I still use
float:left/rightforul liall the time.I guess we don't know the context, but
display:inline-blockis an alternative which you can combine withtext-align:left/rightWhy not bootstrap class unstyled?
I’ve never used Bootstrap, and have never found the inspiration or desire to try it.
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.
I do this with float: dev.to/afif/responsive-hexagon-gri... .. Float is a powerful feature but unfortunately people are thinking that flexbox and CSS grid are the magic tool for everything when it's not. I am actually working on an article that will get released soon showing the power of float in creating complex layout that cannot be achieved using CSS grid or flexbox
I found value for
floatin using, customizing Materialize components ie. fab, chips..., other than this I gave up onfloata long time ago.You have found a good use of Float. Thanks.
Otherwise, I'd be using Flexbox.