元素溢出：自动受浮动元素影响 [英] Element with Overflow:auto affected by Floating Element

问题描述

有人可以向我解释为什么溢出有以下效果。

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

在jsfiddle下面，我有一个Div浮动到左边，宽度和高度设置。
接下来我有一个内容div。您可以将此视为左侧导航和网站布局的内容。

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 could think about this as a left navigation and a content of a site layout.

在内容中，我有两个Div是相同的，除了一个有溢出：auto其他不。一个有overflow：auto目前尊重浮动div和缩短其宽度不与它冲突。作为另一个只是保持其全宽，并运行下浮动的div。

Inside the content I have two Divs which are identical apart from one has overflow:auto the other doesn't. The one with overflow:auto currently respects the floated div and shortens its width to not clash with it. Were as the other one simply keeps its full width and runs underneth the floated div.

虽然overflow：auto给了一个非常有用的行为，我不明白为什么它关心浮动项目。我想如果一个元素有一定的宽度和内部的内容不能适应，那么它会做你所要求的行为，但这是一种应用行为到元素本身

Although the overflow:auto gives a very userful behaviour I do not understand why it cares about the floated item. I thought if a element has a certain width and the content inside that cannot fit, then it will do your requested behaviour but this is sort of applying the behaviour to the element itself

http://jsfiddle.net/9bEDj/1/

有人可以为我澄清这一点，并解释为什么这是行为，或者它不应该这样做和它的一个怪癖！

Can someone clarify this for me and explain why this is the behaviour or if it shouldn't actually be doing this and its a quirk!

推荐答案

这是一个关于浮动/溢出魔法的神话描述

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

这是预期行为，溢出除了visible之外的元素应该尊重浮动，所以你可以使用它不引起任何fuzz

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

这篇关于元素溢出：自动受浮动元素影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！