CSS: why some parent divs area didn't cover child div?

I am using firebug to debug, one useful feature of firebug is when I click the element in HTML, firebug will show highlight on the actual browser window so that I know which part is currently selected.

But I noticed, with some css, below code is interesting:

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

The parent divs highlight area didn't cover the开发者_高级运维 child div's highlight area. In my opinion, the child divs area should be a subset of parent's, is it right? In which cases that that is not true?

There are some cases:

1. If the child uses position: relative; top: 200px and move away from the parent.

2. If the child does something similar using a negative margin. (similar to 1)

3. If the child is a float, and there is no clearing or some kind of clearfix, such as the newest method of making the parent overflow: auto, then the parent will not enclose the floated child.

It is mostly likely because the child divs are floated. In this case you need to use a clearfix hack, or add an additional div into the container like so:

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

It depends upon the style being applied. Generally what you are saying holds good. But positioning of a child element can be made independent of the parent.

You may please show the css to get clear idea.

If the inner element is floating or positioned absolutely, it won't affect the size of the parent.

If the inner element is floating you can change the overflow setting of the outer element to make it contain the child. You can specify overflow:hidden; for the parent element, but no size, which has the side effect that it will be sized to contain it's children.