CSS：为什么一些父div区域没有覆盖子div？

Question

我正在使用firebug进行调试，firebug的一个有用功能是当我单击HTML中的元素时，firebug将在实际的浏览器窗口中显示高亮显示，以便我知道当前选择了哪个部分。

但是我注意到，对于一些css，下面的代码很有趣：

<div>
    <div>
    </div>
</div>

父div高亮区域未覆盖子div的高亮区域。在我看来，孩子divs区域应该是父母的子集，是不是？在哪些情况下，这是不正确的？

Answer 1

有些情况：

1. 如果孩子使用position: relative; top: 200px并离开父母。

2. 如果孩子使用负边距做类似的事情。 （类似于1）

3. 如果孩子是浮动的，并且没有清除或某种类型的clearfix，例如制作父overflow: auto的最新方法，那么父母将不会包含浮动的孩子。< / p>

Answer 2

这很可能是因为儿童div浮动了。在这种情况下，您需要使用clearfix hack，或者在容器中添加一个额外的div，如下所示：

<div style="clear: both"></div>

Answer 3

这取决于所应用的风格。一般来说你所说的都很好。但是，子元素的定位可以独立于父元素。

你可以请出示css以获得清晰的想法。

Answer 4

如果内部元素是浮动的或绝对定位的，它不会影响父元素的大小。

如果内部元素是浮动的，您可以更改外部元素的溢出设置以使其包含子元素。您可以为父元素指定overflow:hidden;，但不能指定大小，其副作用是将其大小设置为包含它的子元素。