What is CSS Float

Floats are a CSS property that is meant to move images inside blocks of text. It became one of the most common ways to create multiple column layouts on pages. With the arrival of css frameworks like bootstrap/foundation, css technologies such as Flexbox and Grid, float has gone away..thankfully. It is a legacy technique.

The float property removes the element from the document flow and other elements will be displayed right beside it. If we don't want the elements to move up we will need to clear it. It was pretty common to have a clearfix hack, this involves inserting generated content after the box. This should behave the same as if you created a div below the items.

With CSS Grid and flexbox we don't need float to positon web pages anymore. The only instance I would use float if we were in an older codebase, 10-12 years old that hasn't been decommissioned yet. We needed to make a small update and the rest of the site uses floats.

I would not come in and refactor the site to use flexbox or CSS Grid, their is potential for their to be fallout from this refactor. I would continue to use float and have consistent coding practices followed in the codebase, even if they are 'technically' outdated or incorrect.

https://css-tricks.com/all-about-floats/

For all new development, please definitely use the latest and greatest standards where possible.