Container div wird nicht erweitert, um untergeordnete div (ohne Floats) zu passen

Question

Mein Container-div wird nicht erweitert, um seinen untergeordneten div zu passen - der einen oberen 20px-Wert hat. Ich habe nicht einmal Floats und habe beide Überlauf verwendet: versteckt (schneidet Teil des Child Div) oder Überlauf: Auto (erstellt Scrollbalken).

Siehe codepen Beispiel: Codepen

<div class="container"> 
<div id="model">fdsf</div> 
</div> 

Schätzen keine Lösungen für dieses Problem.

Answer 1

Entfernen top und position Eigenschaften und margin: 10px auto 0 auto;

#model { 
    background: yellow; 
    border: 1px solid orange; 
    width: 100px; 
    height: 100px; 
    margin: 10px auto 0 auto; 
    display: block; 
} 

Demo

Answer 2

1) In Ihrem Beispiel verwenden, erweitert der Container das Kind div richtig zu passen. Die Höhe des Kindes ist 100px plus das Zweifache der Grenze von 1px, insgesamt 102px. Dann ist die Höhe des Containers genau 102px, wie die Entwickler-Tools in jedem Browser Ihnen sagen können.

Die Höhe des Inhalts beträgt 102px, daher ist die innere Höhe des Containers 102px. Dies ist per definitionem "erweitert um den Inhalt anzupassen".

2) Jetzt setzen Sie position: relative für Ihr Kind div. Das folgende Zitat aus sollte eine vollständige Erklärung zu dem geben, was in Ihrem Beispiel passiert.

Relative Positionierung:

Dieses Schlüsselwort alle Elemente legt, als ob das Element wurden nicht positioniert, und dann die Position des Elements anzupassen, ohne Änderung Layout (und damit eine Lücke für das Element verlassen, wo es hätte gewesen wäre es nicht positioniert worden). Die Auswirkung von position: relativ auf Tabelle - * - Gruppe, Tabellenzeile, Tabellenspalte, Tabellenzelle und Tabellenbeschriftung Elemente ist nicht definiert.

3) Natürlich können Sie diesen Effekt loszuwerden, indem der relativen Positionierung loszuwerden, und statt mit margin einfach. In Bezug auf Ihren Kommentar, nein, top, right, bottom und left sollte absolut nicht funktionieren. Sie sind für eine ganz andere Sache gedacht, für was das Zitat oben erklärt.