Floats were intended as a method to allow text to wrap around objects (e.g. images or other figures). In the late 1990s, as people became more interested in semantic HTML, it was discovered that tables and framesets could be replaced with floats. Floats came with a downside; if every item inside of a container was floated it would collapse and sibling of the container would no longer "clear" it's contents. From this the "clearfix" was born.

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

Ultimately, floats were still a hack. And people still wanted real layout tools in CSS. In 2014 there started to be whispers of two new tools arriving in browsers soon; flex and grid.