Bootstrap
5.3
Ayudantes
Clearfix

Clearfix

Borra rápida y fácilmente el contenido flotante dentro de un contenedor agregando una utilidad clearfix.

Curso de JavaScript

Borra fácilmente los float agregando .clearfix al elemento padre. También se puede utilizar como mixin.

Usar en HTML:

HTML
<div class="clearfix">...</div>

El código fuente del mixin:

scss/mixins/_clearfix.scss (opens in a new tab)

scss/mixins/_clearfix.scss
@mixin clearfix() {
  &::after {
    display: block;
    clear: both;
    content: "";
  }
}

Usa el mixin en SCSS:

SCSS
.element {
  @include clearfix;
}

El siguiente ejemplo muestra cómo se puede usar clearfix. Sin clearfix, el div envolvente no abarcaría los botones, lo que provocaría un diseño roto.

HTML
<div class="bg-info clearfix">
    <button type="button" class="btn btn-secondary float-start">Ejemplo de botón flotando hacia la
        izquierda</button>
    <button type="button" class="btn btn-secondary float-end">El botón de ejemplo flotando hacia la
        derecha</button>
</div>