| layout | title | group |
|---|---|---|
docs |
Clearfix |
utilities |
Easily clear floats by adding .clearfix to the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.
{% highlight html %}
...
{% endhighlight %}
{% highlight scss %} // Mixin itself .clearfix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; } }
// Usage as a mixin .element { @include clearfix; } {% endhighlight %}
The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout.
{% example html %}
Example Button pulled left
Example Button pullred right
{% endexample %}