css - pantalla - Cómo hacer que un div crezca en altura mientras tiene flotadores dentro

height dinamico css

Question

¿Cómo puedo hacer que un div crezca en altura cuando tiene flota 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?

Answer 1

En muchos casos, overflow: auto; será suficiente, pero por el bien de la finalización y el soporte de navegador cruzado, eche un vistazo a Clearfix que hará el trabajo para todos los navegadores.

Consideremos 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 el clearfix, el div principal no tendría una altura debido a sus hijos flotantes. El clearfix hará que el padre considere los hijos flotantes.

Answer 2

Hay más de una forma de limpiar carrozas. Puede verificar algunos aquí:
http://work.arounds.org/issue/3/clearing-floats/

Por ejemplo, clear:both podrían funcionar para usted

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

#element { zoom:1; }

Answer 3

Pensé que una buena forma de hacerlo es establecer display: table en div.

Answer 4

overflow:auto; en el div que contiene, hace que todo lo que hay dentro (incluso elementos flotados) sea visible y el div externo se envuelve completamente alrededor de ellos. Mira este ejemplo .