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. 🔥
Top comments (2)
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 itsdisplay, and maybe add<p>tags around the lorem ipsum for good measure... It floats left naturally. Figured this is worth mentioning (:Nice article.
floatdoes come in handy at times. It lets the text flow around the images nicely.