0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-05 17:24:20 +01:00
Bootstrap/site/content/docs/4.3/helpers/clearfix.md
2019-05-23 11:56:03 +02:00

1004 B

layout title description group aliases
docs Clearfix Quickly and easily clear floated content within a container by adding a clearfix utility. helpers /docs/4.3/helpers/

Easily clear floats by adding .clearfix to the parent element. Can also be used as a mixin.

{{< highlight html >}}

...
{{< /highlight >}}

{{< highlight scss >}} // Mixin itself @mixin clearfix() { &::after { display: block; content: ""; clear: both; } }

// Usage as a mixin .element { @include clearfix; } {{< /highlight >}}

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

Example Button floated left Example Button floated right
{{< /example >}}