Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

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.



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?


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.


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.


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




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: