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
. 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 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>
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 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 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.
"float": (
responsive: true,
property: float,
values: (
start: left,
end: right,
none: none,
)
),