Cómo hacer que un div crezca en altura mientras tiene flotadores adentro

121

¿Cómo puedo hacer que un div crezca su altura cuando tiene flotadores dentro de él? Sé que definir un valor para el ancho y configurar el desbordamiento de las obras ocultas. El problema es que necesito un div con el desbordamiento visible. ¿Algunas ideas?

css html overflow css-float pedrozath
fuente

Respuestas:

278

overflow:auto;en el div contenedor hace que todo dentro de él (incluso los elementos flotantes) sea visible y el div exterior los envuelve completamente. Vea este ejemplo:

.wrap {
  padding: 1em;
  overflow: auto;
  background: silver;
 }
 
.float {
  float: left;
  width: 40%;
  background: white;
  margin: 0 1%;
}
<div class="wrap">
  <div class="float">Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.</div>
  <div class="float">Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.</div>
  </div>
Expandir fragmento

JakeParís
fuente
7
Sí, funciona un poco, pero tiene el peligro de generar barras de desplazamiento ... ¿verdad?
pedrozath
1
No, no que yo sepa de @pedro. El div externo debería seguir expandiéndose para envolver los divs internos. Pruébelo en el violín, aumente las dimensiones de los divs internos y vea qué sucede.
JakeParis
2
Probé esto y una pequeña barra de desplazamiento de unos 2 em de alto apareció a la derecha de la ventana del navegador.
Nigel Alderton
1
@NigelAlderton esto me estaba sucediendo porque estaba forzando la altura del contenedor (donde overflowse agregó). Se corrigió eliminando el overflow: auto;de la clase, así como el heightselector
eggy
16

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

Por ejemplo, clear:bothpodría funcionar para ti

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

#element { zoom:1; }
Nikita Rybak
fuente
1
El beneficio de este enfoque es que overflow: auto;recortará el contenido (como las decoraciones de enfoque) que se desborden fuera del elemento, pero esto no lo hará.
Dan
desbordamiento: creó automáticamente una barra de desplazamiento horizontal para mí, por lo que no pude usarla. Esto funcionó perfectamente.
Edwin Stoteler
Exactamente lo que estaba buscando. Se aplicó este CSS al padre. Expande la altura del padre <div>, de modo que el elemento flotante permanece dentro de él. Elegante, porque dice claramente que: "la parte inferior del padre debe limpiar el flotador".
IAM_AL_X
12

En muchos casos, overflow: auto;será suficiente, pero en aras de la finalización y la compatibilidad con varios navegadores, 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 padre divno tendría una altura debido a sus hijos flotantes. El clearfix hará que el padre considere los hijos flotantes.

miphe
fuente
2
Clearfix es un marcado adicional. Simplemente overflow: auto;
asigne
7

Pensé que una excelente manera de hacerlo es configurar display: tableel div.

pedrozath
fuente