Bootstrap/docs/utilities/clearfix.md

layout, title, group

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 floated left Example Button floated right

{% endexample %}