Float

Alterna la flotación de cualquier elemento, a través de cualquier punto de interrupción, usando nuestras utilidades flotantes responsive.

Descripción general

Estas clases de utilidad hacen flotar un elemento hacia la izquierda o hacia la derecha, o deshabilitan la flotación, según el tamaño actual del viewport usando propiedad CSS float. (opens in a new tab) Se incluye !important para evitar problemas de especificidad. Estos utilizan los mismos puntos de interrupción del viewport que nuestro sistema de cuadrícula. Ten en cuenta que las utilidades flotantes no tienen ningún efecto sobre los elementos flexibles.

<div class="float-start">Float start en todos los tamaños de viewport</div><br>
<div class="float-end">Float end en todos los tamaños de viewport</div><br>
<div class="float-none">No flotar en todos los tamaños de viewport</div>

Utiliza el ayudante clearfix en un elemento principal para borrar los elementos flotantes.

Responsive

También existen variaciones responsive para cada valor float.

<div class="float-sm-end">Float end en viewports de tamaño SM (pequeño) o más ancho.</div><br>
<div class="float-md-end">Float end en viewports de tamaño MD (mediano) o más ancho.</div><br>
<div class="float-lg-end">Float end en viewports de tamaño LG (grande) o más anchas.</div><br>
<div class="float-xl-end">Float end en viewports de tamaño XL (extra grande) o más anchas.</div><br>
<div class="float-xxl-end">Float end en viewports de tamaño XXL (extra extra grande) o más anchas.</div><br>

Aquí están todas las clases de apoyo:

• .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 flotantes se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende a utilizar la API de utilidades.

scss/_utilities.scss (opens in a new tab)

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