Element With Overflow:auto Affected By Floating Element

Can someone explain to me why overflow has the following effect. In the jsfiddle below I have a Div floated to the left with a width and height set. Next I have a Content div. You

Solution 1:

Here is a fabulous description on the float/overflow magic http://colinaarts.com/articles/the-magic-of-overflow-hidden/

It's the intended behaviour that elements with overflow other than visible should respect the floats, so you can use it with not causing any fuzz

Solution 2:

It happens because setting overflow establishes a new block formatting context, and block formatting contexts do not overlap floats.