This is a decent but well working CSS clearfix as used in HTML5-Boilerplate (https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css#L173)

clearfix.css

/*
* Clearfix for modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

clearfix.scss

/* 
 * Clearfix for usage within the Scss language
 * This is a placeholder solution for usage as @extend
 * Usage:
 * 
 * selector-with-floats {
 *     @extend %clearfix; 
 * }
 * 
 */


%clearfix {
    &:before,
    &:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }

    &:after {
        clear: both;
    }
}

/*
 * Clearfix mixin
 */
@mixin clearfix() {
    &:before,
    &:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }

    &:after {
        clear: both;
    }
}