floats Archives - CSS-Tricks

Clearfix: A Lesson in Web Development Evolution

# July 3, 2018 By Jason Hoffman

The web community has, for the most part, been a spectacularly open place. As such, a lot of the best development techniques happen right out in the open, on blogs and in forums, evolving as they’re passed around and improved. I thought it might be fun (and fascinating) to actually follow this creative exchange all the way through. To take a look at a popular CSS trick, the clearfix, and find out exactly how a web design technique comes to be.

(more…)

The End of the Clearfix hack?

# January 25, 2017 By Sarah Drasner

Rachel Andrew with a clear (get it?!) explanation of display: flow-root;, including demos comparing old and new techniques. Apparently the name is still a little bit still up in the air.

The whole point of it is getting rid of clearfix (although it is a bit different), or using a different/unintended property for float clearning. Every time this is brought up, there is always a well actually about how overflow: hidden; does the same (or any other property that creates a new block formatting context). Like we mentioned before, overflow has consquences totally unrelated to float clearning, like hiding shadows. All of the other methods have unrelated consequences.

clearfix floats flow-root