interiores flotante a la izquierda div de no ampliar el contenedor div verticalmente

Question

tengo un div contenedor con los siguientes atributos:

#cat_container{ 
margin:0; 
padding:5px; 
border:1px solid red; 
min-height:200px; 
} 

interior hay múltiples dejado flotando DIV. El problema es que no obligan al div que contiene a expandirse hacia abajo, sino que simplemente se superpone y continúa fuera del límite del div del contenedor.

izquierda del div flotante:

.cat_wrap{ 
border: 1px solid #000; 
width:100px; 
min-height:120px; 
margin:0 10px 5px 0; 
padding:0; 
float:left; 
} 

Si tomo el flotador izquierda a cabo, el div que contiene se expande verticalmente como debería hacerlo. Entonces, ¿cómo hago para que los divs internos floten a la izquierda pero también expanden el contenedor div verticalmente?

Answer 1

necesita configurar el desbordamiento para el div principal. desbordamiento: automático; esto obligará al contenedor div a expandirse y adaptarse al contenido.

#cat_container{ 
    margin:0; 
    padding:5px; 
    border:1px solid red; 
    min-height:200px; 
    overflow: auto; 
    height: auto !important; 
} 

Answer 2

Este es un problema común y se soluciona con una solución "clearfix". Configuración de desbordamiento van a resolver ese problema, sin embargo hay mejores soluciones, como la siguiente:

.mydiv:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 
* html .mydiv    { zoom: 1; } /* IE6 */ 
*:first-child+html .mydiv { zoom: 1; } /* IE7 */ 

El punto principal de esta solución es poner en funcionamiento la propiedad hasLayout de la div. Afortunadamente, es suficiente para IE 6/7 establecer el zoom en 1 para activarlo. Los navegadores modernos que admiten el pseudo elemento :after pueden usar la primera declaración, que es más clara y no afecta a la propiedad de desbordamiento.

Tenga en cuenta que debe evitar utilizar la instrucción !important como se sugirió en la respuesta anterior, ya que no es bueno CSS. Además, no le permitirá controlar la altura del div si desea y no hace nada para resolver el problema.

Answer 3

Es . Una buena forma de hacerlo es usando la propiedad flex.

.container { 
    display: flex; 
    flex-wrap: wrap; 
} 

A continuación, el elemento hijo puede deshacerse de la vieja mágica float propiedad.

Consulte este JSFiddle para ver el efecto.

Nota: cuando las alturas de los elementos de los niños no son uniformes, la forma de flexión se comportará de manera diferente con la forma float. Pero es difícil decir cuál es el correcto.