bootstrap/docs/4.0/utilities/clearfix.md

layout, title, description, group, toc

layout	title	description	group	toc
docs	Clearfix	Quickly and easily clear floated content within a container by adding a clearfix utility.	utilities	true

Easily clear floats by adding .clearfix to the parent element. 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.

{% capture example %}

Example Button floated left Example Button floated right

{% endcapture %} {% include example.html content=example %}