clear floats without structural markup: ".clearfix" is the container that holds all of your floated elements. Works in all browsers that support "float" and "clear". - DEMO: http://jsfiddle.net/voku/ZQXgL/

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;
    }
}