35-float en css

---

The float Property

• The float Property
• Example - float: right
• Example - float: left
• Example - No float
• Example - Float Next To Each Other

---

The float Property

La propiedad float permite que un elemento se desplace a un lado de su contenedor, permitiendo que otros elementos se alineen a su alrededor. Usualmente se aplica a elementos de bloque para controlarlos dentro de un diseño en línea.

Los valores más comunes de la propiedad son:

• left: El elemento se desplaza hacia la izquierda del contenedor, y el contenido fluye alrededor de él a la derecha.
• right: El elemento se desplaza hacia la derecha, y el contenido fluye alrededor de él a la izquierda.
• none: El elemento no se desplaza y se muestra en el flujo normal del documento.

En resumen, la propiedad float es útil para crear diseños en los que los elementos se alinean de forma flexible, como en los casos de las columnas de un sitio web.

Ejemplo Visual de The float Property

En este ejemplo, se puede ver cómo la propiedad float permite mover un elemento hacia la izquierda o derecha, y el contenido fluye alrededor de él.

Este div flota a la izquierda.

Este div flota a la derecha.

...

Example - float: right

Cuando se aplica float: right, el elemento se desplaza a la derecha de su contenedor, permitiendo que el contenido fluya alrededor de él a la izquierda. Es útil para crear elementos que se alinean en la parte derecha, como imágenes, cajas de texto, o botones.

Ejemplo de código:

<div style="float: right; background-color: #ff6347;">
    Este div flotará a la derecha del contenedor.
</div>
<p>Este párrafo fluye a la izquierda del div flotante.</p>
                

Ejemplo Visual de float: right

En este ejemplo, el div se desplaza hacia la derecha, y el contenido fluye alrededor de él a la izquierda.

Este div flota a la derecha.

Este párrafo fluye alrededor del div flotante hacia la izquierda.

Example - float: left

Con float: left, el elemento se mueve hacia la izquierda del contenedor, y el contenido fluye a la derecha de él. Este comportamiento es útil cuando se desea que los elementos aparezcan alineados a la izquierda, como en el caso de las imágenes o cajas de texto que deben colocarse en la parte izquierda.

Ejemplo de código:

<div style="float: left; background-color: #ff6347;">
    Este div flotará a la izquierda del contenedor.
</div>
<p>Este párrafo fluye a la derecha del div flotante.</p>
                

Ejemplo Visual de float: left

En este ejemplo, el div se desplaza hacia la izquierda, y el contenido fluye alrededor de él a la derecha.

Este div flota a la izquierda.

Este párrafo fluye alrededor del div flotante hacia la derecha.

Example - No float

Si no se utiliza la propiedad float o se establece en none, el elemento sigue el flujo normal del documento y no se desplaza a la izquierda ni a la derecha. Los elementos después de él fluyen de acuerdo al orden del HTML.

Ejemplo de código:

<div style="float: none;">
    Este div no flotará, y seguirá el flujo normal del documento.
</div>
<p>Este párrafo sigue el flujo normal después del div.</p>
                

Ejemplo Visual de No float

En este ejemplo, el div sigue el flujo normal sin desplazarse hacia ningún lado, y el párrafo fluye después de él.

Este div sigue el flujo normal.

Este párrafo sigue el flujo normal después del div.

Example - Float Next To Each Other

Cuando se utilizan múltiples elementos con la propiedad float, estos pueden colocarse uno junto al otro, ocupando el espacio disponible en la misma línea. Para lograr esto, simplemente se debe aplicar la propiedad float a cada uno de los elementos y asignarles un ancho adecuado para que se alineen horizontalmente.

Ejemplo de código:

<div style="float: left; width: 45%; background-color: #ff6347;">
    Este div flotará a la izquierda.
</div>
<div style="float: left; width: 45%; background-color: #8fbc8f;">
    Este div flotará junto al anterior.
</div>
                

Ejemplo Visual de Float Next To Each Other

En este ejemplo, dos divs se colocan uno al lado del otro usando la propiedad float. Ambos tienen un ancho del 45% para caber en la misma línea.

Este div flota a la izquierda.

Este div flota junto al anterior.

---

Ir al índice

---

---