¿Cómo puedo hacer que un div crezca en altura cuando tiene flotantes dentro de él? Sé que la definición de un valor para el ancho y la configuración de desbordamiento a obras ocultas. El problema es que necesito un div con el desbordamiento visible. ¿Algunas ideas?Cómo hacer que un div crezca en altura mientras tiene flotadores dentro de
overflow:auto; en el div que contiene hace que todo dentro de ella (incluso artículos flotaban) visible y los div exterior envuelve totalmente alrededor ellos. Ver this example.
Hay más de una forma de limpiar carrozas. Puede comprobar algunos aquí:
http://work.arounds.org/issue/3/clearing-floats/
Por ejemplo, clear:both podría funcionar para usted
#element:after {
content:"";
clear:both;
display:block;
}
#element { zoom:1; }
El beneficio de este enfoque es que 'overflow: auto;' recortará el contenido (como las decoraciones de enfoque) que se desborda fuera del elemento, pero no es así. – Dan
overflow: auto creó una barra de desplazamiento horizontal para mí, así que no pude usarla. Esto funcionó perfectamente. –
En muchos casos, overflow: auto; será suficiente, pero para completar y para el soporte de navegador cruzado, eche un vistazo a Clearfix que hará el trabajo para todos los navegadores.
Vamos a considerar el siguiente marcado ..
<div class="clearfix">
<div class="content">Content 1</div>
<div class="content">Content 2</div>
</div>
Junto con los siguientes estilos ..
.content { float:left; }
.clearfix { ..from link.. }
Sin la clearfix, el padre no tendría div una altura debido a que es niños flotantes. El clearfix hará que el padre considere los hijos flotantes.
Clearfix es un marcado extra. Simplemente déle al padre div el marcado 'overflow: auto;' – JakeParis
Me di cuenta de que una buena manera de hacerlo es establecer display: table en el div.
Sí, funciona un poco, pero tiene el peligro de generar barras de desplazamiento ... ¿no? – pedrozath
No, no es que yo sepa de @pedro. El div externo debería seguir expandiéndose para envolver los divs internos. pruébalo en el violín, aumenta las dimensiones de los divs internos y observa qué sucede. – JakeParis
¡Guau, eso fue increíble, gracias! @JMCCreative – Zhianc