Hacker News Reader

Comment by jassmith87 | Hacker News Reader

I have been in desktop and mobile dev my entire career. Starting doing web dev 12 months ago for a new job. Never once have I thought to myself "I should figure out what float does".

Grid + Flex + Block + Absolute covers all layout needs. It's funny to me because conceptually these ideas have been around on desktop/mobile layout systems forever. That they are only now making it to the web is insane.

View on HN

To be fair, we didnt get Grid till 2017. So.. we finally have (nearly) all the tools we need. Maybe. lol

Float is still very useful for paragraph wrapping around media, for basic alignment etc, when you do not need an entire flow of content to be under the management of flexbox. Less is more.

Floats are still useful, not for the same things you would use grid/flex but still has utility, so its good to know about them.

For what?

I literally haven't used float since grid/flexbox hit adequate market share on CanIUse, and I've been doing web development full time this whole time.

For when you move to a company where the current canIUse marketshare for grid/flexbox is no longer "adequate."

Floats should now only be used for what it's named for, to float around other elements:

https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outsi...

(shape-outside is super buggy though)

For having an image where text flows around it once it finishes. It’s basically good for some text flowing stuff. Which makes sense, that’s what it was designed for originally.

Floats are still useful when you want to express structured document flow layouts with illustrations for nearby body text, side-nav link boxes, aligned or otherwise flow-parametered effects such as initials, syndicated/contributed content, or when you just want to float text around images.

Every time I thought I have needed float, I have always later found a cleaner way to do it without float.

That's probably because float is almost always used for things which it's not designed for. For cases like what the parent described, which float is actually meant for, there is no alternative.

A good example is the floating picture boxes next to paragraphs on Wikipedia. How would you implement such a feature without floats?

On my website I have a sidebar (on large enough displays) where I put sidenotes (which I typically prefer to footnotes). https://chrismorgan.info/blog/dark-theme-implementation/ is an example of an article with both float-based sidenotes and grid-based figure captions in that sidebar. Look at what happens on mobile-sized displays, too. https://chrismorgan.info/blog/2019-website/ is an example of where float really shines on this, with the second sidenote automatically moving down the page due to the length of the first sidenote.

Reply on news.ycombinator.com