Clearfix Mixin

If you still rely on floats, then you will find this clearfix mixin useful… that is if you’re old school and haven’t fully implemented flexbox yet ?. You can also set alignment on specific elements by using classes provided by the alignment classes. Like other mixins, usage will require that you install mustard via npm and include the source within your main SCSS file.

Example Usage:

    
        @include clearfix()
    

Mixin Code:

    
        @mixin clearfix() {
            &::before, &::after {
                content: "";
                display: table;
            }

            &::after {
                clear: both;
            }
        }
    
Up Next: »