Docs: Breaks out Utilities into separate section and optimizes its pages (#20678)

docs/utilities/clearfix.md

@@ -0,0 +1,39 @@
+---
+layout: docs
+title: Clearfix
+group: utilities
+---
+
+Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes [the micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) as popularized by Nicolas Gallagher. Can also be used as a mixin.
+
+{% highlight html %}
+<div class="clearfix">...</div>
+{% endhighlight %}
+
+{% highlight scss %}
+// Mixin itself
+.clearfix() {
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    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.
+
+{% example html %}
+<div class="bg-info clearfix">
+  <button class="btn btn-secondary pull-xs-left">Example Button pulled left</button>
+  <button class="btn btn-secondary pull-xs-right">Example Button pullred right</button>
+</div>
+{% endexample %}