¿Cómo consigo un div para envolver a los niños flotantes?

Question

Considerando el siguiente código, donde los elementos span están flotando dentro de div, ¿cómo puedo hacer que el div se ajuste alrededor de los elementos secundarios flotantes, de modo que el borde 1px ajuste los elementos secundarios?

<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

mayoría de las veces, añadiendo overflow:hidden en el envoltorio es suficiente:

<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> 

A veces, verá este enfoque alternativo (que es mucho más hacky, pero probablemente tiene mejor copia de la versión soporte del navegador).

<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

Uso del claraCSS propiedad de acuerdo a MDN documentos web: https://developer.mozilla.org/en-US/docs/Web/CSS/clear

Nota: Si un elemento contiene sólo flotaba elementos, su altura se colapsa para nada. Si desea que siempre sea capaz de cambiar el tamaño, de modo que contenga elementos flotantes en su interior, necesita autorregar sus elementos secundarios. Esto se llama clearfix, y una forma de hacerlo es claro un reemplazado :: después del pseudo-elemento en él.

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