El posicionamiento es un poco distinto al resto. Para empezar, no se define con la propiedad position
, si no con la propiedad float
. Puede tomar estos valores:
left
: flotante a la izquierda (float: left;
).right
: flotante a la derecha (float: right;
).none
: sin flotante.Lo que hace este posicionamiento es desplazar el elemento todo lo que pueda hacia la dirección indicada, hasta encontrar el límite del elemento contenedor, u otro elemento también flotante. Además hace que todos los elementos fluyan alrededor de él.
Es muy común utilizarlo en imágenes, para que el texto fluya alrededor de ellas. En el siguiente ejemplo, todas las cajas contienen un párrafo con una imagen al principio (<p><img /> Texto</p>
). Sólo cambia el float
de la imagen.
Normal. La imagen queda en la posición inicial, aumentando el alto de la línea, y no aparecen varias líneas de texto junto a la imagen.
Derecha. La imagen está en la misma posición, pero con un float: right;. Esto permite que aparezcan varias líneas de texto junto a la imagen, y cuando llegue al final, que continúe por debajo.
Izquierda. La imagen está en la misma posición, pero con un float: left;. Esto permite que aparezcan varias líneas de texto junto a la imagen, y cuando llegue al final, que continúe por debajo.
Observa que el texto puede quedar demasiado pegado a la imagen. Para solucionarlo, no hay más que aplicar un pequeño margin
a la imagen, hacia el lado que está el texto.
Existen algunos inconvenientes al utilizar el posicionamiento flotante. Un elemento que contiene a otro flotante, no lo tiene en cuenta para su tamaño a lo alto. Por ejemplo, el siguiente párrafo tiene un borde, y vemos que si la imagen es flotante, "se sale".
Normal. El párrafo se ajusta a la imagen y el texto.
Derecha. El párrafo sólo ajusta su alto al texto.
Además, si por ejemplo hay varios párrafos con elementos flotantes al mismo lado, hace que se "amontonen":
Normal. Primer párrafo.
Normal. Segundo párrafo.
Derecha. Primer párrafo
Derecha. Segundo párrafo.
Para solucionar esto, disponemos de la propiedad clear
, que rompe el flotamiento. Puede tomar tres valores:
left
: impide el flotamiento a la izquierda.right
: impide el flotamiento a la derecha.both
: impide el flotamiento por ambos lados.En el siguiente ejemplo, utilizamos el mismo que en el ejemplo anterior, pero al segundo párrafo le hemos dado la propiedad de estilo clear: right;
.
Derecha. Primer párrafo
Derecha. Segundo párrafo.
Con el posicionamiento flotante, podemos por ejemplo colocar elementos uno al lado del otro. En el siguiente ejemplo, hemos utilizado cajas, todas con float:left;
y un pequeño margen para que no se peguen. Observa cómo se comportan cuando cambias el tamaño de la ventana:
De forma muy parecida, podemos utilizar el posicionamiento flotante para crear columnas en un documento. Basta con que la suma del ancho de las capas que harán de columnas quepa en el ancho de elemento contenedor, y que tengan posicionamiento flotante. En Internet Explorer, si la suma de los anchos es del 100%, para algunos tamaños de ventana no cabe, por lo que mostrará una columna debajo de la otra, aunque esto sólo ocurre a veces. Por eso, cuando utilizamos porcentajes es mejor utilizar un ancho total un poco menor, por ejemplo del 99% o 99.5%.
De acuerdo con lo que hemos dicho, podemos dividir un elemento en dos columnas de la siguiente manera:
div#columna_izquierda { float: left; width: 30%; height: 100%; background-color:SandyBrown; } div#columna_derecha { float: left; width: 69.5%; height: 100%; background-color:LightGreen; }
Para añadir una cabecera al principio, no hay más que poner una capa antes de las columnas, con todo el ancho. Y para poner un pie, haríamos lo mismo, pero colocándolo después de las columnas, y rompiendo el flotamiento con clear:both;
.
div#cabecera { width: 99.5%; height: 10%; background-color:RoyalBlue; } div#columna_izquierda { float: left; width: 30%; height: 80%; background-color:SandyBrown; } div#columna_derecha { float: left; width: 69.5%; height: 80%; background-color:LightGreen; } div#pie { clear: both; width: 99.5%; height: 10%; background-color:Violet; }
La principal diferencia con el posicionamiento absoluto es que al flotante sí le afectan los márgenes, propios y del elemento contenedor, y que no estamos obligados a definir el alto. En el ejemplo anterior, hemos establecido el alto porque no hay contenido, pero si no lo especificamos, el alto se ajustaría al contenido del elemento.
Para practicar lo que hemos visto, te recomendamos que hagas los ejercicios Maquetar con posicionamiento flotante y Organizar elementos.
Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.