Clearfix

Легко очистить float, добавив .clearfixк родительскому элементу. Также может использоваться как миксин.

Использование в HTML:

<divclass="clearfix">...</div>

Исходный код миксина:

@mixin clearfix(){&::after{display:block;clear:both;content:"";}}

Используйте миксин в SCSS:

.element{@include clearfix;}

В следующем примере показано, как можно использовать clearfix. Без clearfix обертывающий div не будет охватывать кнопки, что приведет к нарушению макета.

<divclass="bg-info clearfix"><buttontype="button"class="btn btn-secondary float-start">Кнопка примера перемещена влево</button><buttontype="button"class="btn btn-secondary float-end">Кнопка примера перемещена вправо</button></div>