Clearfix

The .clearfix class is used to clear floated content within a container. This class should be added to the parent of the floating element, as shown in the examples below.

Please consider the following example in which, two floating buttons are placed within a div class="bg". The background is not displayed as the wrapping div does not have any content to span around.

    <div class="bg">
        <div class="row">
            <button type="button" class="float-start m-2">Button left</button>
            <button type="button" class="float-end m-2">Button right</button>
        </div>
    </div>

Please consider the following example in which, two floating buttons are placed within a div class="bg" to which a clearfix is applied as well. In this case, the background spans around both buttons, as expected.

    <div class="bg clearfix">
        <div class="row">
            <button type="button" class="float-start m-2">Button left</button>
            <button type="button" class="float-end m-2">Button right</button>
        </div>
    </div>