Why does 'overflow: auto' clear floats? And why are clear floats needed?

Question

My question arose when I created my (first ever!) two columns.

I have a wrapper for my left and right columns, but the wrapper's height didn't expand to fit the left and right columns with each floated to its side respectively.

I found a solution online where it adds the style (is this the right word?) 'overflow: auto' to the wrapper. After some research, I've found several articles that explain what the overflow does, including this stackoverflow answer:Why "overflow: hidden" clears a float?

However, nothing in my research explains in a way I can understand why the wrapper's height doesn't auto-expand to fit the nested divs, the two columns.

Don't all things nested within a div are contained within that div? Doesn't this create boundaries for the inside elements?

Any help is appreciated for this noobie. Thanks!

Answer 1

The reason why the wrapper doesn't stretch to contain its floats by default is because the floats are taken out of the normal flow of the wrapper, so the wrapper acts as if they were never there. If there is no other content in the wrapper, that means the wrapper won't have any height.

Note that overflow: auto doesn't clear floats — it just causes the element to contain its floats by way of establishing a new block formatting context for them so that they don't intrude to other elements in the parent context.¹ That is what forces the parent to stretch to contain them. You can only clear a float if you add a clearing element after the float. A parent element cannot clear its floating children.

The reason why establishing a new BFC causes an element to contain its floats is detailed here, and the reason why overflow: auto would even cause a BFC to be established is detailed here.

---

¹_{OK, maybe "just" wasn't exactly the best adverb to use.}