Float

Descripción general

Estas clases utilitarias flotan un elemento a la izquierda o derecha, o desactivan la flotación, según el tamaño actual del viewport usando la propiedad CSS float. Se incluye !important para evitar problemas de especificidad. Estas usan los mismos breakpoints de viewport que nuestro sistema de cuadrícula. Ten en cuenta que las utilidades de float no tienen efecto en los elementos flex.

<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don’t float on all viewport sizes</div>

Usa el clearfix helper en un elemento padre para limpiar los floats.

Responsive

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

<div class="float-sm-end">Float end on viewports sized SM (small) or wider</div><br>
<div class="float-md-end">Float end on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-end">Float end on viewports sized LG (large) or wider</div><br>
<div class="float-xl-end">Float end on viewports sized XL (extra large) or wider</div><br>
<div class="float-xxl-end">Float end on viewports sized XXL (extra extra large) or wider</div><br>

Aquí están todas las clases soportadas:

• .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 float se declaran en nuestra utilities API en scss/_utilities.scss. Aprende a usar la utilities API.

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