<commit_before>---
layout: docs
title: Floating
group: utilities
---

These utility classes float an element to the enable or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float).

Instead of using `left/right` designators, the float utilities use `start/end` designators to match up with the [flexbox utilities]({{ site.baseurl }}/utilities/flexbox/).

{% example html %}
<div class="float-start">Float start aligned on all viewport sizes</div><br>
<div class="float-end">Float end aligned on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div><br>

<div class="float-sm-end">Float end aligned on viewports sized SM (small) or wider</div><br>
<div class="float-md-end">Float end aligned on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-end">Float end aligned on viewports sized LG (large) or wider</div><br>
<div class="float-xl-end">Float end aligned on viewports sized XL (extra-large) or wider</div><br>
{% endexample %}

{% highlight scss %}
// Related simple non-responsive mixins
.element {
  @include float-start;
}
.another-element {
  @include float-end;
}
.unfloated-element {
  @include float-none;
}
{% endhighlight %}
<commit_msg>Add not about float inside flex container<commit_after>---
layout: docs
title: Floating
group: utilities
---

These utility classes float an element to the enable or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float).

Note that the float utilities do not have any affect on items inside flex container.  Please refer to the [flexbox specification](https://www.w3.org/TR/css-flexbox-1/#flex-containers) for details.

Instead of using `left/right` designators, the float utilities use `start/end` designators to match up with the [flexbox utilities]({{ site.baseurl }}/utilities/flexbox/).

{% example html %}
<div class="float-start">Float start aligned on all viewport sizes</div><br>
<div class="float-end">Float end aligned on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div><br>

<div class="float-sm-end">Float end aligned on viewports sized SM (small) or wider</div><br>
<div class="float-md-end">Float end aligned on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-end">Float end aligned on viewports sized LG (large) or wider</div><br>
<div class="float-xl-end">Float end aligned on viewports sized XL (extra-large) or wider</div><br>
{% endexample %}

{% highlight scss %}
// Related simple non-responsive mixins
.element {
  @include float-start;
}
.another-element {
  @include float-end;
}
.unfloated-element {
  @include float-none;
}
{% endhighlight %}

{'fraction_non_alphanumeric': 0.13484740951029098, 'fraction_numerical': 0.0007097232079489, 'mean_word_length': 4.897489539748954, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 45, 'https://': 3, 'lorem ipsum': 0, 'www.': 1, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4196506', 'n_tokens_mistral': 895, 'n_tokens_neox': 838, 'n_words': 301}