Perché i margini verticali figlio non espandono il contenitore principale?

Question

Mi sono imbattuto in un caso in cui ho bisogno del margine di un bambino per espandere un contenitore genitore. Ho scoperto che lo spazio esterno al genitore è allocato, ma il genitore stesso non è espanso. Ho poi scoperto che aggiungendo "overflow: hidden" al genitore potevo risolvere il problema.

Qualcuno può far luce sul perché questo è il caso?

UPDATE:

Ho trovato che l'aggiunta di qualsiasi imbottitura o il valore di confine al genitore risolve anche questo.

Updated Example

Answer 1

La risposta al "perché" è descritto bene e succintamente here. Ci sono alcune proprietà che stabiliscono un "block formatting context". Vale a dire:

galleggianti, assolutamente [e fisso] elementi posizionati, contenitori a blocchi (come linea-blocchi, tovaglie, celle e tabella sottotitoli) che non sono bloccano scatole e scatole blocchi con 'overflow 'diverso da' visibile '(eccetto quando tale valore è stato propagato al viewport) stabilisce nuovi contesti di formattazione del blocco per il loro contenuto.

è questo cambiamento di contesto di formattazione a blocchi che è il motivo per cui tali soluzioni come sopra nell'opera commenti per come margin (e nel caso di una precedente float, padding di seguire elementi di afflusso) opera .

Answer 2

ritengo collasso margini è la ragione: http://www.w3.org/TR/CSS2/box.html#collapsing-margins