Warum Höhe: Auto funktioniert nicht korrekt?

Question

Ich habe 2 Fragen:

1. warum Element #post nicht genug strecken das Bild zu decken? obwohl ich height:auto gesetzt habe.

2. Warum löst dieses Problem mit overflow:hidden? wie ich weiß, overflow:hidden wird verwendet, wenn ein Element aus seinem übergeordneten Element und ausblenden Teil aus. in meinem Beispiel versteckt es es nicht. Es dehnt Elternelement aus, um Bild abzudecken. Warum?

entschuldigen Sie mich für schlechtes Englisch. wenn es möglich ist mit einfachen englischen Wörtern zu erklären. vielen dank.

HTML:

<div id="posts"> 
<div id="new-posts"> 
    <img src="https://weneedfun.com/wp-content/uploads/2016/01/Daisy-Flower- 
3.jpg"> 
    <p>here is ccontent of post . here is ccontent of post . 
     here is ccontent of post . here is ccontent of post . 
     here is ccontent of post . here is ccontent of post . </p> 
</div> 

css:

#posts { 
border: 1px solid; 
/* overflow: hidden; */ 
height: auto; 
} 

#new-posts img{ 
float: left; 
margin: 10px; 
height:100px; 
width:100px; 
} 

jsfiddle:

mit Überlauf: https://jsfiddle.net/hamed98/ez66sgwt/

ohne Überlauf: https://jsfiddle.net/hamed98/sL25m9mx/

Answer 1

Gebrauchsposition absolute

#posts { 
border: 1px solid; 
overflow: hidden; 
height: auto; 
position:absolute;} 

Answer 2

1. Dies liegt daran, das Bild eine float Eigenschaft hat. Schwebende Elemente können die Grenzen des Blockelements, einschließlich ihres übergeordneten Blocks, überschreiten (warum sind sie so konzipiert, wird gut erklärt in this article). Aus diesem Grund wird die automatische Höhe des Containers nur durch seinen nicht-schwebenden Inhalt bestimmt (Textabsatz).

2. Durch den Container overflow andere als visible Einstellung, stellen Sie die Behälter der neue block formatting context (als Nebeneffekt dieser Eigenschaft). Im Gegensatz zu normalen Blöcken lassen Blöcke mit dem neuen Blockformatierungskontext Floats ihre Grenzen nicht überschreiten, sodass sie immer ihre verschachtelten Floats enthalten.