| commit | author | age | ||
| 83c3f6 | 1 | --- |
| SP | 2 | layout: docs |
| 3 | title: Clearfix | |
| 4 | description: Quickly and easily clear floated content within a container by adding a clearfix utility. | |
| 5 | group: utilities | |
| 6 | toc: true | |
| 7 | --- | |
| 8 | ||
| 9 | Easily clear `float`s by adding `.clearfix` **to the parent element**. Can also be used as a mixin. | |
| 10 | ||
| 11 | {% highlight html %} | |
| 12 | <div class="clearfix">...</div> | |
| 13 | {% endhighlight %} | |
| 14 | ||
| 15 | {% highlight scss %} | |
| 16 | // Mixin itself | |
| 17 | @mixin clearfix() { | |
| 18 | &::after { | |
| 19 | display: block; | |
| 20 | content: ""; | |
| 21 | clear: both; | |
| 22 | } | |
| 23 | } | |
| 24 | ||
| 25 | // Usage as a mixin | |
| 26 | .element { | |
| 27 | @include clearfix; | |
| 28 | } | |
| 29 | {% endhighlight %} | |
| 30 | ||
| 31 | 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. | |
| 32 | ||
| 33 | {% capture example %} | |
| 34 | <div class="bg-info clearfix"> | |
| 35 | <button type="button" class="btn btn-secondary float-left">Example Button floated left</button> | |
| 36 | <button type="button" class="btn btn-secondary float-right">Example Button floated right</button> | |
| 37 | </div> | |
| 38 | {% endcapture %} | |
| 39 | {% include example.html content=example %} | |
