0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-12 00:08:59 +01:00
Bootstrap/site/content/docs/5.3/helpers/clearfix.md
XhmikosR cf9454caa0
Release v5.3.0-alpha1 (#37661)
* Bump version to 5.3.0-alpha1

* Dist

* Add docs versions updates

* Update note in homepage hero

Co-authored-by: Mark Otto <markdotto@gmail.com>
2022-12-24 18:37:22 +02:00

944 B

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

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

Use in HTML:

<div class="clearfix">...</div>

The mixin source code:

{{< scss-docs name="clearfix" file="scss/mixins/_clearfix.scss" >}}

Use the mixin in SCSS:

.element {
  @include clearfix;
}

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