Flotaciones, fondos, problemas, alternativas

En una página web, todo es relativo, casi no existen reglas absolutas que funcionen en el 100% de los casos y eso, pese a que muchos opinan lo contrario, no es malo; es lo que permite la variedad aunque también genera los problemas.

Uno de esos problemas suele darlo la propiedad float que es útil pero debe ser usada con prudencia (como todo) y sólo ahí donde sea necesario ya que "trastorna" la forma en que se genera una página, quitando ese contenido del orden natural que es el mismo que se utiliza para leer o escribir (de arriba hacia abajo y de izquierda a derecha).

Frente a cosas raras, lo primero que debería preguntarme es si la propiedad es necesaria o no pero, supongamos que si y tenemos dos DIVs que flotan a la derecha y un texto; el HTML es algo así:

<div class="demoflotante"> ....... </div>
<div class="demoflotante"> ....... </div>
<div> un texto </div>

Si esos DIVs tienen un ancho pequeño, veremos esto:

Proin fringilla ultricies diam, id sodales ipsum suscipit sit amet. Vivamus in libero elit, eu cursus magna. Maecenas sagittis mollis sapien, at hendrerit dui viverra a! Nulla rutrum sapien vel tortor iaculis a amet.

El texto, "rodea" a los dos DIVs flotantes pero ... ocupa un rectángulo mayor ¿Cómo puede verse ese espacio? por ejemplo, colocando un color de fondo:

Proin fringilla ultricies diam, id sodales ipsum suscipit sit amet. Vivamus in libero elit, eu cursus magna. Maecenas sagittis mollis sapien, at hendrerit dui viverra a! Nulla rutrum sapien vel tortor iaculis a amet.

Tal como hemos puesto el HTML, da la impresión que quisiéramos que el texto se viera debajo y ahi hay tres soluciones posibles básicas.

La primera es agregarle al DIV del texto, la propiedad clear:both; para "eliminar" las flotaciones previas y volver al orden natural o clear:right ya que los DIVs superiores flotan a la derecha:

Proin fringilla ultricies diam, id sodales ipsum suscipit sit amet. Vivamus in libero elit, eu cursus magna. Maecenas sagittis mollis sapien, at hendrerit dui viverra a! Nulla rutrum sapien vel tortor iaculis a amet.

¿Qué pasará ahora con el rectángulo? Quedará perfectamente ubicado porque clear hace justamente eso, restaura el orden:

Proin fringilla ultricies diam, id sodales ipsum suscipit sit amet. Vivamus in libero elit, eu cursus magna. Maecenas sagittis mollis sapien, at hendrerit dui viverra a! Nulla rutrum sapien vel tortor iaculis a amet.

¿Cuál es el problema de este método? Si el texto tiene un margen superior, este no tendrá ninguna utilidad, será ignorado. En el ejemplo tiene un margin-top: 100px; y como se ve, ni se inmuta.

El segundo método es incluir un DIV extra ANTES del texto; algo así (Blogger dispone de una clase autmática que hace lo mismo):

<div style="clear:both;"></div>

Aunque, dependiendo de la plantilla, tal vez deberíamos agregar más propeidades para resetear todas ya que es posible que tengamos reglas de estilo que establezcan fondos, bordes o cualquier otra cosa y lo único que queremos es hacer un corte así que deberíamos chequear font-size, line-height, margin, padding, border, background, etc o intentar poner height: 0; y ver si eso resuelve las cosas:

Proin fringilla ultricies diam, id sodales ipsum suscipit sit amet. Vivamus in libero elit, eu cursus magna. Maecenas sagittis mollis sapien, at hendrerit dui viverra a! Nulla rutrum sapien vel tortor iaculis a amet.

¿Qué pasa con los rectángulos? Se verán igual que en el caso anterior y ahora, el margen superior vuelve a funcionar:

Proin fringilla ultricies diam, id sodales ipsum suscipit sit amet. Vivamus in libero elit, eu cursus magna. Maecenas sagittis mollis sapien, at hendrerit dui viverra a! Nulla rutrum sapien vel tortor iaculis a amet.

El último método es el "moderno"; se ve en muchas plantillas nuevas tanto de Blogger como de WordPress y consiste en crear una clase con una regla genérica que se puede aplicar a cualquier etiqueta; se suele llamar clearfix pero puede llamarse de cualquier forma:

.clearfix:after {
  clear: both;
  content: "x";
  display: block;
  height: 0;
  visibility: hidden;
}

pero en nuestro ejemplo eso sólo eliminaría las flotaciones a la izquierda, para hacerlo con las de la derecha, sería igual pero usando :before así que lo genérico podría ser:

.clearfix:after, .clearfix:before {
  clear: both;
  content: "x";
  display: block;
  height: 0;
  visibility: hidden;
}

Esa clase la agregamos al DIV del texto.

<div class="demoflotante"> ....... </div>
<div class="demoflotante"> ....... </div>
<div class="clearfix"> un texto </div>

Proin fringilla ultricies diam, id sodales ipsum suscipit sit amet. Vivamus in libero elit, eu cursus magna. Maecenas sagittis mollis sapien, at hendrerit dui viverra a! Nulla rutrum sapien vel tortor iaculis a amet.

El resultado final será similar a la primera opción, los márgenes verticales funcionan de manera extraña y el rectángulo tampoco queda definido tal como uno deseaba.

Proin fringilla ultricies diam, id sodales ipsum suscipit sit amet. Vivamus in libero elit, eu cursus magna. Maecenas sagittis mollis sapien, at hendrerit dui viverra a! Nulla rutrum sapien vel tortor iaculis a amet.

¿Cuál es la mejor solución?

Ninguna de ellas y todas. Depende. Basta saber qué hace cada una de ellas y listo, el resto, depende de nosotros.