0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-03 15:24:19 +01:00
Bootstrap/docs/4.1/utilities/clearfix.md
Mark Otto 8f7bd41993
Ship v4.1.0 (#26218)
* update docs path from docs/4.0/ to docs/4.1/

* bump version to 4.1.0

* Update redirects to work for 4.1 docs move

* Update docs version switcher to include latest and link to 4.0 docs

* re-run dist

* Update package-lock.json

* Update docs-navbar.html
2018-04-09 09:00:23 -07:00

1.0 KiB

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