David Lorenz
Food for Developers

Food for Developers

`float:left` is not dead ๐Ÿ™‡โ€โ™‚๏ธ

`float:left` is not dead ๐Ÿ™‡โ€โ™‚๏ธ

Understanding float is the key to using it.

David Lorenz's photo
David Lorenz
ยทDec 23, 2021ยท

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

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.


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. ๐Ÿ”ฅ

ย 
Share this