Overflow element: automatically depends on the floated element

Can someone explain to me why the overflow has the following effect.

In the jsfiddle below, I have a Div floated to the left with the width and height set. Then I have a div. You might think of it as left navigation and content of the site layout.

Inside the content, I have two Divs that are identical, except one has an overflow: auto the other does not. Whoever has the: auto overflow currently respects the floating div and shrinks its width to avoid colliding with it. Was since the other just kept its full width and runs below the floating div.

While the: auto overflow gives very convenient behavior, I don't understand why it cares about the float. I thought that if an element has a specific width and the content inside that cannot match, then it will fulfill your requested behavior, but this is kind of applying the behavior to the element itself


Can someone please clarify this for me and explain why this behavior is, or if it shouldn't actually be his quirk!


source to share

2 answers

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

This is the intended behavior that overflowed elements other than visible should respect floats, so you can use it without calling any fuzz





All Articles