Rengga Dev – An interesting conversation came up at work the other day: Should we use the CSS float property now that we have CSS Grid and Flexbox?
The short answer
No! Well, mostly. I’d only use it today for wrapping text around images, though and I’d avoid using float entirely for layouts.
The longer, more annoying answer
Before flexbox and grid, we had to use the CSS float property to make grids and layouts. In fact, it was the first thing I learned about web design. On one hot summer afternoon I cracked open a copy of Designing with Web Standards by Jeffrey Zeldman and then moved a tiny red div with float: right. It was magic. There was power in the float.
It was so easy to move something around on the screen that I now wonder how many designers fell in love with the web simply because of how easy it is to use move things around like that.
But using float to build complex layouts was always a hack: it was only really designed to let text wrap around an image.
img {
width: 150px;
float: left;
}
