Dlaczego dziecięce pionowe marginesy nie rozszerzają kontenera nadrzędnego?

Question

Natknąłem się na przypadek, w którym potrzebuję marginesu dziecka, aby rozwinąć pojemnik nadrzędny. Odkryłem, że przestrzeń poza rodzicem jest alokowana, ale sam rodzic nie jest rozszerzony. Następnie stwierdziłem, że dodanie do nadrzędnego `overflow: hidden 'mogłoby rozwiązać ten problem.

Czy ktoś może rzucić jakiekolwiek światło na to, dlaczego tak się dzieje?

UPDATE:

I odkryli, że dodanie żadnej wyściółki lub wartość graniczną dla rodzica rozwiązuje również ten.

Updated Example

Answer 1

Odpowiedź na "dlaczego" jest opisany dobrze i zwięźle here. Istnieją pewne właściwości, które ustanawiają "block formatting context". A mianowicie:

pływaków, absolutnie [oraz fixed] Elementy umieszczone, pojemniki blokowe (takie jak inline bloki tabela komórki i obrusy tytułem), które nie blokują pola i pola bloku z przepełnienia "inny niż" widoczny "(z wyjątkiem , gdy ta wartość została propagowana do widoku), ustanawia nowe konteksty formatowania bloków dla ich zawartości.

Jest to zmiana kontekstu formatowania blokowego to jest powód dlaczego rozwiązania takie, jak podano powyżej w pracach komentarzy dla jak margin (aw przypadku poprzedzającego float, padding z następujących elementów napływie) działa .

Answer 2

myślę zawaleniem marginesów jest powód: http://www.w3.org/TR/CSS2/box.html#collapsing-margins