Aplicando la Propiedad FLOAT a Nuestras Capas

Esta propiedad (interesante y quizás algo complicada) hace flotar la capa del modo que queramos, haciendo que el resto de elementos externos a esa capa se posicionen alrededor de ella... más o menos. Los posibles valores que podemos darle son left (flota a la izquierda), right (flota a la derecha) o none (no flota).

Para verlo más claro, si a una capa le ponemos en la hoja de estilo float:left, esta capa se situará a la izquierda y el siguiente elemento que tengamos se colocará como si el anterior no existiera (pues está flotando), a menos claro que a ese segundo elemento le pongamos un float:right con lo que este segundo quedara a la derecha de la página. Pero no te preocupes que esto lo veremos bien con los ejemplos. Si no ponemos nada los navegadores entenderan que float tiene el valor none que significa que No flotan. Si no flotan no se pondrán una encima de otra, pero si flotan y no las colocamos bien sí que pueden superponerse.

Vamos a ver que pasa si le ponemos a bartolo un float:left. Con eso bartolo pasará a ser flotante a la izquierda, luego catalina podrá colocarse arriba y no debajo de bartolo, pues éste está flotando dejando sitio para catalina. Guau, que lio, no? Para catalina es como si bartolo no existiera por lo que se colocará en el lugar que antes ocupaba bartolo. Si, no queda muy bien, pero se puede arreglar. Para esto la hoja de estilo queda así:

Y el resultado es este.

Si ahora le añadimos un float:right a catalina tendremos este otro código para la hoja de estilo:

Y este otro resultado. Vemos como ahora catalina está a la derecha. Su anchura a cambiado. Un float suele tomar la anchura que necesita para mostrar el contenido, no más. Vamos a ponerle una anchura concreta... a ver... si el global tiene 800 pixeles y bartolo 80 me quedan a simple vista 720px para que sea ocupado por catalina, así que a catalina le ponemos esto en la hoja de estilos:

El resultado no es muy convincente. Ahora resulta que no se superponen ¿Por qué? Pues porque ahora los dos están flotando y así sí que no pueden superponerse. Además vemos como catalina ocupa más espacio de lo que creíamos y al no caber junto a bartolo se va a la línea de abajo. ¿Por qué? Pues por que hemos olvidado que la capa bartolo no ocupa en realidad 80 ni el espacio disponible en global es de 800 pixeles. Esos 800 son totales, a los que hemos de restar lo que ocupa el margin, el padding y como no, el border que definimos de espesor 1 pixel. Todo eso es espacio que no queda libre para catalina. Si nos pasamos de ancho catalina pasará al renglón de abajo que no es lo que pretendemos. Queremos que quede a la derecha de bartolo ocupando el máximo espacio posible. Normalmente se hace la resta, 800 menos el borde, menos... pero los tios vagos como yo preferimos hacerlo a ojo. Ponemos por ejemplo un width a catalina de 594px, miro qué pasa, y así voy hasta que queda bien... Ponle 714px a catalina y veras.

Más sobre Capas:

• Más sobre Capas
• Creación del Primer DIV
• Título y Estilo
• Bautizando DIVs
• Aplicando Propiedades
• Más Propiedades
• Aplicando Margin
• Aplicando Padding
• Aplicando Width
• Aplicando Float
• Más Retoques
• Clear
• Overflow
• Tres en uno