溢出效果和漂浮样式与浮动

Question

我非常熟悉CSS，但我看到一些奇怪的浮动/清除行为。我有它的工作，但我不完全确定为什么，我正在寻找解释。

JSFiddle：http://jsfiddle.net/ismyrnow/JV5n6/

我有一个2列布局 - 侧边栏和内容 - 侧边栏浮动，但内容不是;内容div有一个左边距。

如果我对内容div中的任何元素使用clear:both，该元素会意外地降低到侧边栏div的高度以下（意外的是因为浮动的侧边栏不会直接影响内容区域内项目的位置）

更令人意想不到的是，当我向内容div添加overflow:auto时，问题就消失了。 （我找到了解决方案here）

有人可以解释一下：

1. 为什么clear:both会导致元素清除不会直接影响其位置的浮动元素。

2. 为什么父元素上的overflow:auto可以解决问题。

Answer 1

1.   

   为什么clear:both会导致元素清除不直接影响其位置的浮动元素。

   它可能不会直接影响它的位置，但无论如何它仍然会影响它，因为在没有任何间隙的情况下，浮标通常不受限制它们如何影响正常流动布局的其余部分，即使它们是取而代之，甚至不是由不同的父元素，例如你的.b内容元素，在这种情况下左边距。唯一真正的限制是浮动元素只能影响以文档树顺序出现在它们后面的元素，即跟随（不在前面）兄弟节点的元素及其后代。

   内容列中元素正上方的内容不够高，无法将其推送到浮动元素下方。如果删除该声明，您会看到both .c elements become positioned next to their respective floats as well。

   当您添加clear时，会发生的情况是它会强制清除元素位于浮动位置下方，而不管它在何处水平结束。

2.   

   为什么父元素上的overflow:auto可以解决问题。

   这是因为overflow以外的visible生成block formatting contexts的任何块框都会生成float property。块格式化上下文的一个属性是它外面的浮动框永远不能与其中的任何框交互，反之亦然。

   一旦你使内容元素建立了自己的块格式化上下文，你的浮动元素就不再能够影响内容元素中的任何元素（参见clear property），和< / em>其中的清除元素不再能够清除内容元素之外的任何浮动（请参阅{{3}}）。

Answer 2

clear:both

clear CSS属性指定元素是否可以位于其前面的浮动元素旁边，或者必须在它们下面向下移动（清除）。

clear属性适用于浮动和非浮动元素。

当应用于非浮动块时，它会向下移动元素的边缘，直到它低于所有相关浮点的边缘。这种运动（当它发生时）导致边缘坍塌不会发生。

当应用于浮动元素时，它会将元素的边缘移动到所有相关浮点的边缘下方。这会影响后续浮点数的位置，因为后面的浮点数不能高于先前浮点数。

与要清除相关的浮点数是同一块格式化上下文中的早期浮点数。

我希望这会清除你的怀疑。 这是我找到上述信息的链接.....

https://developer.mozilla.org/en-US/docs/Web/CSS/clear