Wie bekomme ich ein div um herumschwimmende Kinder zu wickeln?

Question

Mit Blick auf den folgenden Code, wo die span Elemente innerhalb der div Floating sind, wie kann ich die div Wrap um die schwimmenden Kind Elemente, so dass die 1px Grenze wickelt die Kinder Elemente?

<div style="border:1px solid #000"> 
    <span style="float:left">Content</span> 
    <span style="float:left">Content</span> 
    <span style="float:left">Content</span> 
</div> 

Answer 1

Der meiste Zeit, overflow:hidden auf der Umhüllung Zugabe genügt:

<div style="border:1px solid #000; overflow:hidden;"> 
    <span style="float:left">Content</span> 
    <span style="float:left">Content</span> 
    <span style="float:left">Content</span> 
</div> 

Manchmal werden Sie diesen alternativen Ansatz sehen (die viel mehr Hacky ist, hat aber wahrscheinlich besser zurück-Version Browser-Unterstützung).

<div style="border:1px solid #000; "> 
    <span style="float:left">Content</span> 
    <span style="float:left">Content</span> 
    <span style="float:left">Content</span> 
    <div style="clear:both;"></div> 
</div> 

Answer 2

Verwenden Sie die klarCSS Eigenschaft nach MDN web docs: https://developer.mozilla.org/en-US/docs/Web/CSS/clear

Hinweis: Wenn ein Element nur Elemente schwebte enthält, seine Höhe zu nichts zusammenbricht. Wenn Sie möchten, dass die Größe immer geändert werden kann, sodass darin schwebende Elemente enthalten sind, müssen Sie die untergeordneten Elemente selbst löschen. Dies heißt Clearfix, und eine Möglichkeit, es zu tun ist löschen ersetzt :: nach Pseudo-Element auf es.

#container::after { 
    content: ""; 
    display: block; 
    clear: both; 
}