src/scss/bootstrap-4.0.0-alpha.6/docs/utilities/clearfix.md

   1 ---
   2 layout: docs
   3 title: Clearfix
   4 group: utilities
   5 ---
   6
   7 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.
   8
   9 {% highlight html %}
  10 <div class="clearfix">...</div>
  11 {% endhighlight %}
  12
  13 {% highlight scss %}
  14 // Mixin itself
  15 @mixin clearfix() {
  16   &::after {
  17     display: block;
  18     content: "";
  19     clear: both;
  20   }
  21 }
  22
  23 // Usage as a mixin
  24 .element {
  25   @include clearfix;
  26 }
  27 {% endhighlight %}
  28
  29 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.
  30
  31 {% example html %}
  32 <div class="bg-info clearfix">
  33   <button class="btn btn-secondary float-left">Example Button floated left</button>
  34   <button class="btn btn-secondary float-right">Example Button floated right</button>
  35 </div>
  36 {% endexample %}