]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
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 %} |