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. 🔥