Propiedad Float
La propiedad float saca un elemento del flujo normal de un sitio y lo ubica lo más a la derecha o a la izquierda que sea posible dentro de su contenedor. Este comportamiento permite que el resto del contenido envuelva el elemento flotado.
Valores
La propiedad float puede tomar las siguientes propiedades:
- left
- El elemento flotará lo más a la izquierda posible dentro de su contenedor.
- right
- El elemento flotará lo más a la derecha posible dentro de su contenedor.
- none
- Elimina el float del elemento y lo devuelve al flujo natural.
Ejemplo
El código muestra cómo una imagen se comporta al ser ingresada dentro de un párrafo:
<p>
<img src="img/float.jpg" alt="thumbnail" />
Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops.
</p>
Este código se visualizaría así:
Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops.
Tanto la imagen como el texto son elementos en linea y su comportamiento natural es ubicarse uno junto al otro
Modificaremos la propiedad float del elemento así:
img {float: left;}
float: left
Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops. Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops.
float: right
Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops. Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops.
Descripción
La imagen al ser flotada a la izquierda o derecha saldrá del flujo, se ubicará los más a la izquierda o derecha posible dentro de su contenedor.
El texto que la acompaña es influenciado por la imagen aunque esta esté flotada y la intentando seguir el flujo natural.
Ejemplos
Flotar un elemento texto en linea
A través de la etiqueta span, marcaremos una parte del texto para flotarlo.
<p>
<span class="bajada">Cupcake ipsum dolor.</span> Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops. Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops.
</p>
La class "bajada" la definimos así:
.bajada{
width:100px;
float: right;
background-color:#fad88e;
padding:4px;
margin:4px;
font-size:1.5em;
}
Y el resultado es:
Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops. Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops.
Descripción:
Los elementos de texto en linea, al ser flotados se comportan como elementos en bloque.
Al comportarse como elemento en bloque, podemos aplicar la propiedad margin a todos sus lados para separarlo del contenido.
Al ser un elemento en bloque, éste puede expandirse a todo el ancho de su contenedor. Por esta razón, es útil definir un ancho específico en la regla.
Flotar un elemento en bloque
Flotaremos uno de tres párrafos.
<p>Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops. Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake.</p>
<p class="flotar-izquierda">Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops. Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake.</p>
<p>Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops. Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake.</p>
La class "flotar-izquierda" la definimos así:
.flotar-izquierda{
float:left;
width:100px;
background-color:#925505;
color:#fff;
}
Y el resultado es:
Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops. Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake.
Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake.
Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops. Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake.
Descripción:
El párrafo se mueve hacia la izquierda.
Cuando flotamos un elemento en bloque, su propiedad width toma el valor auto, por lo tanto se extenderá a todo el ancho de su contenedor. Entonces, debemos especificar un ancho
Los elementos en bloque siempre flotarán en relación a su posición original. Esto significa que en el eje horizontal, el elemento se moverá a la izquierda o derecha según el valor de la propiedad float. En el eje vertical se mantendrá siempre debajo del elemento que precede.