Bootstrap/docs/utilities/clearfix.md
Mark Otto 869bd23937 Update clearfix mixin (#21224)
* Update clearfix to use block instead of table display (also reorder properties for linting)
* update docs snippet for clearfix mixin—was apparently still using Less syntax and had old clearfix hack (even before the block change in this PR)
2016-11-27 17:05:29 -08:00

961 B

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 @mixin clearfix() { &::after { display: block; content: ""; 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 %}