html - limpiar - qué son los elementos flotantes
¿Por qué el desbordamiento de elementos flotantes de detención oculta escapa de su contenedor? (2)
Crea un contexto de formato de bloque .
Los contextos de formato de bloque son importantes para el posicionamiento (ver flotación) y el despeje (ver claro) de flotadores. Las reglas para el posicionamiento y el borrado de carrozas se aplican solo a las cosas dentro del mismo contexto de formato de bloque. Los flotantes no afectan el diseño de las cosas en otros contextos de formato de bloque, y clear solo borra los flotantes pasados en el mismo contexto de formato de bloque.
ver también: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
Un problema común que tengo con las páginas web es que los divs flotantes se arrastran fuera de sus contenedores.
#wrapper{
border:1px solid red;
}
#wrapper div{
float:left;
font-size: 3em;
}
...
<div id="wrapper">
<div>Hello World</div>
</div>
Ejemplo en vivo: http://jsfiddle.net/ugUVa/1/
Hay muchas maneras sucias de arreglar esto (insertando un div con clear: both)
Una solución mucho más ordenada que he visto es establecer el estilo de desbordamiento de divs de envoltura en oculto:
Ejemplo: http://jsfiddle.net/ugUVa/2/
Esto funciona bien en todos los navegadores, de forma agradable y limpia, sin marcado adicional. Estoy feliz, pero no tengo idea ¿POR QUÉ funciona?
Toda la documentación que he examinado indica desbordamiento: oculto es para ocultar contenido, sin cambiar el tamaño de un elemento primario para adaptarlo a sus hijos ...
¿Alguien puede ofrecer una explicación para este comportamiento?
Gracias
Es correcto que el estilo de overflow está destinado a controlar lo que sucede con el contenido desbordado.
El efecto en los elementos flotantes es un efecto secundario del estilo de overflow que crea un contexto de formato de bloque para el elemento.
Cuando no especifica un tamaño para el elemento contenedor, el contexto de formato de bloque obtiene su tamaño de los elementos que contiene, de modo que ese es el tamaño que obtiene el elemento contenedor.