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

¿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 a oculto funciona. El problema es que necesito un div con el desbordamiento visible. Alguna idea?

Author: Pops, 2011-01-05
Source

4 answers

overflow:auto; en el div que contiene hace que todo lo que está dentro de él (incluso los elementos flotantes) sea visible y el div exterior los envuelve completamente. Ver 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>
 251
Author: JakeParis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-20 14:05:27

Hay más de una manera de limpiar flotadores. Usted 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; }
 12
Author: Nikita Rybak,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-01-05 12:34:52

En muchos casos, overflow: auto; será suficiente, pero para completar y soportar 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 div no tendría una altura debido a sus hijos flotantes. El clearfix hará que el padre considere los hijos flotantes.

 11
Author: miphe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-24 06:18:13

Pensé que una gran manera de hacerlo es establecer display: table en el div.

 7
Author: pedrozath,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-07 22:56:05