Flotación (Float)

Resumen

Estas clases de utilidad flotan un elemento hacia la izquierda o hacia la derecha, o desactivan la flotación, según el tamaño actual de la ventana gráfica utilizando la propiedad CSS float. Se incluye !important para evitar problemas de especificidad. Estos utilizan los mismos puntos de interrupción de ventana gráfica que nuestro sistema de cuadrícula. Ten en cuenta que las utilidades de flotación no tienen efecto en los elementos flex.

<div class="float-start">Flotar al inicio en todos los tamaños de ventana gráfica</div><br>
<div class="float-end">Flotar al final en todos los tamaños de ventana gráfica</div><br>
<div class="float-none">No flotar en todos los tamaños de ventana gráfica</div>

Usa el ayudante clearfix en un elemento padre para limpiar las flotaciones.

Responsivo

También existen variantes responsivas para cada valor de float.

<div class="float-sm-end">Flotar al final en ventanas gráficas de tamaño SM (pequeño) o más anchas</div><br>
<div class="float-md-end">Flotar al final en ventanas gráficas de tamaño MD (mediano) o más anchas</div><br>
<div class="float-lg-end">Flotar al final en ventanas gráficas de tamaño LG (grande) o más anchas</div><br>
<div class="float-xl-end">Flotar al final en ventanas gráficas de tamaño XL (extra grande) o más anchas</div><br>
<div class="float-xxl-end">Flotar al final en ventanas gráficas de tamaño XXL (extra extra grande) o más anchas</div><br>

Aquí están todas las clases compatibles:

• .float-start
• .float-end
• .float-none
• .float-sm-start
• .float-sm-end
• .float-sm-none
• .float-md-start
• .float-md-end
• .float-md-none
• .float-lg-start
• .float-lg-end
• .float-lg-none
• .float-xl-start
• .float-xl-end
• .float-xl-none
• .float-xxl-start
• .float-xxl-end
• .float-xxl-none

CSS

API de utilidades de Sass

Las utilidades de flotación se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende a utilizar la API de utilidades.

"float": (
  responsive: true,
  property: float,
  values: (
    start: left,
    end: right,
    none: none,
  )
),