DEV Community

Cover image for `float:left` is not dead πŸ™‡β€β™‚οΈ
David Lorenz
David Lorenz

Posted on • Updated on • Originally published at

`float:left` is not dead πŸ™‡β€β™‚οΈ

In the Tech Community in the last few years there have been strong opinions on things. But some things are not opinions. Some things can simply be explained by facts.

One of it is the assumption that display: flex or display: grid are alternatives for floating. They are not. Period.

Drake Dancing

At this point you might think that I am crazy but let me elaborate before you agressively type comments destroying your keyboard.

display: flex is born out of a requirement that CSS hasn't solved before: Proper Layouting. In other words: Using display: block; float: ... for layouts always was a workaround. Same as in the old times when we used <table ..> for layouting.

Okay but then why should I still use float: ... ?

As I said: It was never built for "layouting" in the sense of what we understand as "layouting" today. Such that we have to get back to what it's actually supposed to do.

As the term float already states it is supposed to let things float (no shit sherlock) as opposed to display: flex which cannot let things float. So it's an awesome helper to wrap text around any kind of figure which makes up for a very awesome reading experience if used correctly.

The pragmatic explanation will be done via my CodePen where Drake will help you to understand better:

Reach out to me via Follow-Up Questions if you have any. πŸ”₯

Discussion (2)

toddpress profile image
Todd Pressley

Interesting to see a sane defense of float, good article.

The one thing I'd add is that images' default styles will wrap text around them since they're not blocks. The float: left; is only needed for our friend Drake in #1 because we have a block-level heading below his image. Move the heading above the image or change its display, and maybe add <p> tags around the lorem ipsum for good measure... It floats left naturally. Figured this is worth mentioning (:

brandonwallace profile image

Nice article.
float does come in handy at times. It lets the text flow around the images nicely.