Mejores prácticas para CSS Clear or Overflow

Question

Tener una conversación con un compañero de trabajo sobre lo que es una buena práctica con CSS clear/overflow. Por favor, cierra uno de nosotros y explica por qué uno es mejor que el otro.

JOEL DEL CÓDIGO (usando desbordamiento):

<style> 
    .container { overflow: hidden; } 
    .one, .two { float: left; width: 50px; height: 50px; background-color: red; } 
</style> 

<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 

CÓDIGO DE CHRIS'(usando clara):

<style> 
    .clear { clear: both; } 
    .one, .two { float: left; width: 50px; height: 50px; background-color: red; } 
</style> 

<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="clear"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="clear"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="clear"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="clear"></div> 
</div> 

Ambos hacen esta imagen:

Quién tiene la razón ? :)

Answer 1

Si se encuentra en una situación en la que siempre sabe cuál será el elemento siguiente, puede aplicar el texto claro: ambos; valorar ese elemento y dedicarse a su negocio. Esto es ideal ya que no requiere hacks extravagantes ni elementos adicionales que lo hagan perfectamente semántico. Por supuesto, las cosas normalmente no funcionan de esa manera y necesitamos tener más herramientas de limpieza de flotación en nuestra caja de herramientas.

http://css-tricks.com/all-about-floats/

Answer 2

Aquí es una solución de compromiso:

DEMO jsBin

CSS:

.container { display:table; } 
    .one, .two { float: left; width: 50px; height: 50px; background-color: red; margin:1px;} 

HTML:

<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 

Lo escribiría de esta manera. El código de CHRIS es algo que no escribiría, sino la causa de los DIV vacíos redundantes.

Answer 3

Dado que el CSS en ambos casos es casi el mismo en términos de complejidad y facilidad de mantenimiento, la solución con HTML más simple (y por lo tanto, más pequeño) y carga útil en general gana. No es una gran diferencia, y con la compresión, el código repetido probablemente desaparecerá, pero más simple y más pequeño siempre es mejor si todo lo demás es igual.

Answer 4

¿Qué tal el micro clearfix? Sin marcado adicional, sin recortes overflow: hidden;, soporte de navegador cruzado para IE 6+.

Answer 5

Mi preferencia personal es la técnica overflow:hidden. Creo que esto es porque algo flotante es una decisión de estilo. Colocar una clase de clear en el marcado me parece como agregar información de estilo en la capa de datos. Es similar (pero no tan malo) como agregar css en línea. (De hecho, si lo piensas bien, puedes agregar style="clear:both" al div que deseas agregar class="clear").

Esto es, por supuesto, mi opinión personal. No pretendo que uno sea mejor que el otro. Pero rara vez he encontrado un problema con overflow:hidden.

Answer 6

overflow: hidden se usa mejor cuando tienes un contenedor que es más pequeño que el contenido interno; mientras que claro: ambos se usan mejor cuando se quiere que un contenedor flotante NO se coloque junto al contenedor más cercano.

Al observar su ejemplo de red squres, le recomendamos utilizar clear over en vez de overflow, pero no como aquí. tal vez algo más como:

.container { width:110px; clear:both; } 
.one, .two { float: left; width: 50px; height: 50px; margin-right:10px; background-color: red; } 

, básicamente, que son a la vez malo y derecha. Joel usa el mejor enfoque html, pero Chris está usando el código CSS correcto, solo de la manera incorrecta.