An interesting conversation came up at work the other day: Should we use the CSS float<\/code> property now that we have CSS Grid and Flexbox?<\/p>\n\n\n\n\n\n\n

The short answer <\/h3>\n\n\n

No! Well, mostly. I\u2019d only use it today for wrapping text around images, though and I\u2019d avoid using float<\/code> entirely for layouts.<\/p>\n\n\n

The longer, more annoying answer<\/h3>\n\n\n

Before flexbox and grid, we had to use the CSS float<\/code> 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<\/em> by Jeffrey Zeldman and then moved a tiny red div with float: right<\/code>. It was magic. There was power<\/em> in the float<\/code>.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

But using float<\/code> to build complex layouts was always a hack<\/a>: it was only really designed to let text wrap around an image.<\/p>\n\n\n\n

img {\n  width: 150px;\n  float: left;\n}<\/code><\/pre>\n\n\n\n