Clearfix
Borra rápida y fácilmente el contenido flotante dentro de un contenedor agregando una utilidad clearfix.
Borre fácilmente los floats agregando .clearfix al elemento padre. También se puedes utilizar como mixin.
Uso en HTML:
<div class="clearfix">...</div>
El código fuente del mixin:
@mixin clearfix() {
&::after {
display: block;
clear: both;
content: "";
}
}
Uso del mixin en SCSS:
.element {
@include clearfix;
}
Tal vez te interese
El siguiente ejemplo muestra cómo se puede utilizar clearfix. Sin clearfix, el div envolvente no se extendería alrededor de los botones, lo que causaría un diseño roto.
<div class="bg-info clearfix">
<button type="button" class="btn btn-secondary float-start">Botón flotando a la izquierda</button>
<button type="button" class="btn btn-secondary float-end">Botón flotando a la derecha</button>
</div>