Floated Child Elements: desbordamiento: oculto o claro: ¿ambos?

Question

Como desarrollador web, con frecuencia tendré dos divs flotantes (secundarios) dentro de otro div (padre). En realidad hago esto todo el día.

<style type="text/css"> 
    #left {float:left;} 
    #right {float:right;} 
</style> 
<div id="parent"> 
    <div id="left" class="child">&nbsp;</div> 
    <div id="right" class="child">&nbsp;</div> 
</div> 

Esto no funciona sin un toque adicional de css/html porque el padre no crece automáticamente para adaptarse a los niños flotaban. Hay dos maneras populares de superar eso:
1) Agregue overflow:hidden al CSS del padre.
2) Agregue un tercer niño "clearing" <br style="clear:both;" />.

Sé que hay algunas otras preguntas similares acerca de tales cosas, pero mi pregunta es:

¿Qué método es mejor y por qué? ¿Qué son los pros y los contras de cada uno?

Answer 1

1. Desbordamiento oculto - método bastante sólido. La principal desventaja es que si establece una altura en el elemento principal, cualquier desbordamiento será ... bueno, oculto. Encontré esto al crear un menú con elementos de lista flotante, los submenús no aparecerían.

2. Elemento de compensación: en lugar de un salto de línea, usaría un div con height: 0; clear: both; ya que no creará un espacio debajo. Este es un método más sólido, la única desventaja es un elemento adicional en el marcado.

3. Float the parent: en mi experiencia hay demasiadas situaciones en las que no desea flotar el elemento principal, por lo que lo evitaría.

4. También puede utilizar el método de contenido generado:

   #parent:after { 
       content: "."; 
       visibility: hidden; 
       clear: both; 
   } 
   

   Esto ahorra la necesidad de un elemento adicional en el marcado, pero no va a trabajar en IE7 y abajo.

5. Usa bloques en línea: acabo de recordar este método. En lugar de flotar las dos columnas, los puso a display: inline-block y aparecerán de lado a lado:

   .child { 
       display: inline-block; 
       vertical-align: top; 
   } 
   

   Lo único que debe recordar con este método es que si no hay ningún espacio en blanco entre la etiqueta de cierre de un bloque y la etiqueta de apertura de otro, aparecerá un espacio entre las columnas (cuyo tamaño depende de la fuente por lo que es difícil de medir). Siempre que lo haga ...</div><div id=..., este método funciona bien y es superior a los elementos flotantes IMO.

Answer 2

El segundo es totalmente innecesario y agrega marcado extra. Solo algo más para salir mal. Use el primero si se ajusta a la factura. También puede hacer flotar el elemento principal para hacer lo mismo, aunque podría no ajustarse a lo que está haciendo.

Answer 3

PPK discute esto en Clearing floats en QuirksMode.