Bootstrap 5 Clearfix

Bootstrap 5 .clearfix helper class facilitates clearing and fixing the floated content in an element or container by adding the clearfix utility. Basically, without clearfix class, the floated content/elements act like they have a position set to absolute and to fix that, we use the clearfix helper class of bootstrap.

Syntax:

<div class="clearfix">
 ...(floating content)
</div>

Example 1: In this example, we have 2 identical div elements with the background color set to ".bg-danger" class. Both have children, an input tag (for email) which is floated at the start, and a submit button which is floated at the end. Then, one of them is without the ".clearfix" class and another div is with the ".clearfix" class.

Output: 

Example 2: In this example, we have 5 buttons and we have applied ".float-start", ".float-end" and ".float-none" classes to these buttons and then have applied the ".clearfix" class to the parent div.

Output: 

Reference: https://getbootstrap.com/docs/5.2/helpers/clearfix/