Wie kommt es, dass meine Float-Elemente nicht in ihrem übergeordneten Element sind?

Im Grunde habe ich also dieses Wrapper-Div, und alle darin enthaltenen Elemente sind Floating-Elemente. Die einzige Sache ist, dass die Grenze des Wrapper-Div keine Floating-Elemente enthält. Beispiel:

<div id = "wrapper>
   <div id = "content"></div>
</div>

hier das css:

#wrapper
{
   width:         1000px;
   margin-left:   auto;
   margin-right:  auto;
   border:        1px solid;
} 

#content
{
   border:        1px solid;
   width:         850px;
   height:        400px;
   display:       block;
   float:         left;
}

Im Grunde genommen ist #content nicht innerhalb der Grenze von #wrapper eingeschlossen, sondern wird immer noch darin ausgerichtet, warum ist das so?

Sie müssen das Container-Div “clearfixen”.

Floating-Elemente werden bei der Berechnung der Abmessungen eines Containers nicht berücksichtigt, es gibt jedoch mehrere Problemumgehungen, um das gewünschte Ergebnis zu erzielen.

Das einfachste

Fügen Sie einfach ein Div wie dieses als letztes untergeordnetes Element in Ihrem Container-Div hinzu:

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

Wie @Pekka kommentiert, gibt es viele andere Möglichkeiten, den in dieser SO-Frage aufgeführten Effekt (ohne zusätzliches Markup) zu erzielen:

Welche ‘clearfix’-Methoden kann ich verwenden?

Weil das Schwimmerpunkt ist, Ihnen zu erlauben, Dinge zu tun wie

Wenn Sie Elemente in einer Reihe anordnen möchten (mit optionalem Umbruch), dann suchen Sie nach Verwendung Flexbox stattdessen. Es ist ein Layout-Tool, das dafür entwickelt wurde.

div {
    display: flexbox;
    border: 2px solid blue;
}

img { 
    margin: 3px; 
}

<div>
  <img src="https://placekitten.com/100/100" alt="">
  <img src="https://placekitten.com/100/200" alt="">
  <img src="https://placekitten.com/200/100" alt="">
  <img src="https://placekitten.com/150/150" alt="">
  <img src="https://placekitten.com/75/100" alt="">
  <img src="https://placekitten.com/100/75" alt="">
  <img src="https://placekitten.com/75/75" alt="">
  <img src="https://placekitten.com/105/95" alt="">
</div>

Wenn schwimmt sind das richtige Werkzeug für Ihren Anwendungsfall, dann beschreibt Ed Eliot eine große Sammlung von verschiedene Möglichkeiten, einen Container zu erweitern, um seine schwebenden untergeordneten Elemente aufzunehmen. Generell empfehle ich die Einstellung overflow: hidden darauf (um einen neuen Blockformatierungskontext einzurichten).

div {
    overflow: hidden;
    border: 2px solid blue;
}

img { 
    float: left;
    margin: 3px; 
}

<div>
  <img src="https://placekitten.com/100/100" alt="">
  <img src="https://placekitten.com/100/200" alt="">
  <img src="https://placekitten.com/200/100" alt="">
  <img src="https://placekitten.com/150/150" alt="">
  <img src="https://placekitten.com/75/100" alt="">
  <img src="https://placekitten.com/100/75" alt="">
  <img src="https://placekitten.com/75/75" alt="">
  <img src="https://placekitten.com/105/95" alt="">
</div>