vagacode

Que algo esté alineado (propiedad text-align) o que flote (propiedad float) no es lo mismo. Puede parecerlo pero es completamente diferente, de allí que muchas veces, nos encontramos con problemas cuando tratamos de ubicar algo en una determinada posición.

El concepto es difícil de asimilar a primera vista pero, debemos partir de esto: todo lo que agregamos a una página web es un rectángulo y básicamente, sólo hay dos tipos de rectángulos; unos, llamados bloques, ocupan el ancho total de donde se pongan y crean un salto de línea, es decir, son independientes, se separan de lo que está arriba y de lo que está debajo. El segundo grupo de rectángulos es el llamado inline; estos, ocupan el espacio exacto de su contenido.

Un ejemplo con varias etiquetas coloreadas para que se vea cada rectángulo:

Etiquetas como div, p, los encabezados, etc, son bloques; etiquetas como span, strong o em son inline.

Con CSS, cualquier etiqueta puede convertirse de uno a otro tipo, para eso, es que usamos la propiedad display a la que le damos el valor block o inline. De esta forma, una lista que normalmente es una serie de bloques (ya que ul y li son etiquetas de bloque), la podemos mostrar horizontalmente cambiándoles la propiedad display:

Cuando algo flota o sea, cuando le agregamos la propiedad float, convertimos a ese elemento en un bloque pero con una característica especial: el ancho, a diferencia de un bloque, no ocupa el 100% del contenedor sino sólo el de su contenido. Por ejemplo, un encabezado h2 es una etiqueta de bloque y normalmente se ve así:

Si lo que quiero es ponerlo a la derecha, intento con text-align:right:

No funciona, lo que se alinea es el contenido, así que lo voy a hacer flotar:

¿Qué ocurrió? Se transformó en algo diferente ya no es un bloque en el sentido que ya no ocupa todo el ancho pero tampoco es inline porque veamos que pasa si coloco algo arriba y abajo:

<p style="color: blue;">Ut wisi enim ... commodo consequat.</p>
<h2 style="float: right;">ESTE ES UN ENCABEZADO H2</h2>
<p style="color: red;">Duis autem vel eum iriure ... nulla facilisi.</p>

El texto superior (en azul) no sufre cambios pero el texto en rojo que está debajo del objeto que flota, se acomoda como puede alrededor de este y la etiqueta p (en color amarillo), se acomoda a la izquierda y como ocupa más altura, continua debajo del encabezado h2.

¿Y si cambiamos para que flote a la izquierda?:

Pasa lo mismo, todo lo que está debajo de un elemento que flota sube y se acomoda alrededor de este. Es como si a todo elemento que flotara lo quitáramos de la página, le diéramos un tamaño y luego lo empujáramos dentro de esta, ejerciendo presión. Todo lo que estaba allí antes, se moverá y se acomodará como pueda para hacerle lugar.

Si tenemos varios elementos flotantes, estos se ubicarán a derecha o izquierda, según se lo indiquemos y flotarán hasta el borde o hasta encontrarse con otro elemento flotante. Todo lo que está debajo y no flote, se amoldará hasta que, superada la altura del más alto de estos, la página retome su orden natural:

Carece de importancia si flotan hacia un lado u otro, tienen prioridad y el contenedor inferior aparece debajo y los otros se acomodan a su alrededor:

Sólo hay algo que permite eliminar las consecuencias de esa flotación, otra propiedad llamada clear que tiene cuatro valores posibles: none, left, right y both.

Con left, le decimos al navegador que a partir de ese lugar, ignore las flotaciones izquierda superiores y lo que sigue, se escriba debajo de forma normal; con right hacemos lo mismo para las flotaciones a la derecha y con both, le indicamos que lo haga con ambas:

Esa propiedad la agregamos de muchas maneras, por ejemplo en una etiqueta vacía:

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

Otra forma de limpiar esas flotaciones es definir una clase general que agregaremos en la primera etiqueta que deseemos que las elimine:

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

Los elementos flotantes son sencillo pero pueden causarnos problemas. Por ejemplo, supongamos que queremos que un elemento contenga otros dos y que estén uno al lado del otro:

<style>
	#contenedor {margin: 0 auto; width:515px;}
	#principal {background-color:#456;height: 200px;width: 300px;outline:1px solid #888;}
	#secundario {background-color: #234;height: 150px;width: 200px;outline:1px solid #888;}
</style>

<div id="contenedor">
  <div id="principal" style="float:left"> ....... </div>
  <div id="secundario" style="float:right"> ....... </div>
</div>

Como los navegadores arman la página, leyendo las etiquetas de arriba hacia abajo y de izquierda a derecha, primero se ubica el que flota a la izquierda y luego el que flota a la derecha; como el contenedor mide 600 pixeles de ancho y los contenidos 300 y 200, sobran 100 pixeles que es lo que se separan entre si.

Si ambos flotaran a la izquierda quedarían pegados y si quisiéramos separarlos entre si deberíamos usar un margen; lo mismo ocurriría si ambos flotaran a la derecha pero, en ese caso, la posición se invierte (el segundo esta en el lugar del primero) pese a que el HTML sigue siendo el mismo. Esta es la característica principal de la propiedad float: deshace el orden natural de las etiquetas, reubicándolas.

invertir ambos left ambos right restaurar

¿Entonces da lo mismo el orden en que establecemos los distintos elementos de nuestra página porque con CSS podemos ubicarlos en cualquier parte? Desde el punto de vista visual si pero el orden en que están las etiquetas es fundamental cuando se trata de optimizar un sitio ya que hay algo de sentido común, así como las personas leen de arriba hacia abajo y de izquierda a derecha, lo mismo ocurre con los motores de búsqueda y como estos motores ignoran las propiedades, si el HTML tiene arriba el contenido secundario y debajo, el contenido principal lo secundario tendrá prioridad; es lo mismo que ocurriría con un periódico que colocara el titular debajo del artículo y no arriba.

Los motores de búsqueda no entienden de derechas e izquierdas, leen las cosas de manera secuencial, una debajo de la otra y se sabe que no son pacientes así que, simplemente, toman lo primero que encuentran y lo usan para indexar el sitio. Si lo que está primero, es lo secundario, el resultado podría no ser el mejor. Si lo que queremos es tener una sidebar a la derecha en lugar de tenerla a la izquierda, deberíamos colocar el HTML de modo natural, poner el contenido primero y luego el secundario y establecer las propiedades CSS para invertirlos gráficamente.

En el ejemplo anterior, teníamos un contenedor de 600 pixeles de ancho y el contenido se acomodaba dentro de este pero ¿podríamos colocarle un fondo de color o un borde?

agregar fondo y borde

No funciona; esto se debe a que cuando no se especifica un valor para el alto de un elemento, este se calcula a partir del alto de los elementos que contiene (más margenes), pero, si el contenido flota, es lo mismo que quitarlo del interior y el contenedor se queda sin contenido. Como es muy común que desconozcamos esa altura porque en la mayoría de las páginas el contenido es dinámico, para solucionar esto tenemos varias alternativas, una de ellas es agregarle al contenedor la propiedad overflow: hidden; otra es establecer la propiedad display con un valor como inline-block.

probar otra vez

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; es por eso que la propiedad float debe ser usada con prudencia 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).

Entonces, lo primero que debería preguntarme es si la propiedad es necesaria o no. ¿Cuál es la mejor solución? Ninguna y todas. Depende. Basta saber qué hace cada una de esas reglas de estilo y listo, el resto, depende de nosotros.