CSS: почему некоторые родительские divs не покрывали дочерний div?

Question

Я использую firebug для отладки, одна полезная функция firebug - когда я нажимаю элемент в HTML, firebug отображает подсветку в фактическом окне браузера, чтобы я знал, какая часть в данный момент выбрана.

Но я заметил, с каким CSS, код ниже интересен:

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

Родитель область дивы выделить не охватывает область выделения дочернего Div в. На мой взгляд, область дочерних divs должна быть подмножеством родителей, правильно? В каких случаях это неверно?

Answer 1

Есть некоторые случаи:

1. Если ребенок использует position: relative; top: 200px и отойти от родитель.

2. Если ребенок делает что-то подобное, используя отрицательный запас. (аналогично 1)

3. Если ребенок является поплавком и отсутствует очистка или какое-либо clearfix, например, самый новый способ создания родительского overflow: auto, то родительский элемент не будет содержать плавающего ребенка.

Answer 2

Это зависит от применяемого стиля. Вообще то, что вы говорите, хорошо. Но позиционирование дочернего элемента может быть сделано независимо от родителя.

Вы можете показать css, чтобы получить четкое представление.

Answer 3

В основном это связано с тем, что дочерние divs перемещаются. В этом случае вы должны использовать clearfix hack, или добавить дополнительный DIV в контейнер таким образом:

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

Answer 4

Если внутренний элемент полностью или полностью расположен, он не будет влиять на размер родителя.

Если внутренний элемент плавает, вы можете изменить настройку переполнения внешнего элемента, чтобы он содержал дочерний элемент. Вы можете указать overflow:hidden; для родительского элемента, но не размер, который имеет побочный эффект, который будет иметь размер, чтобы содержать его детей.