|
Ultima modificación |
Ver Log
|
| Rev |
Autor |
Línea Nro. |
Línea |
| 1 |
efrain |
1 |
---
|
|
|
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 |
---
|
|
|
7 |
|
|
|
8 |
Easily clear `float`s by adding `.clearfix` **to the parent element**. Can also be used as a mixin.
|
|
|
9 |
|
|
|
10 |
```html
|
|
|
11 |
<div class="clearfix">...</div>
|
|
|
12 |
```
|
|
|
13 |
|
|
|
14 |
```scss
|
|
|
15 |
// Mixin itself
|
|
|
16 |
@mixin clearfix() {
|
|
|
17 |
&::after {
|
|
|
18 |
display: block;
|
|
|
19 |
content: "";
|
|
|
20 |
clear: both;
|
|
|
21 |
}
|
|
|
22 |
}
|
|
|
23 |
|
|
|
24 |
// Usage as a mixin
|
|
|
25 |
.element {
|
|
|
26 |
@include clearfix;
|
|
|
27 |
}
|
|
|
28 |
```
|
|
|
29 |
|
|
|
30 |
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.
|
|
|
31 |
|
|
|
32 |
{{< example >}}
|
|
|
33 |
<div class="bg-info clearfix">
|
|
|
34 |
<button type="button" class="btn btn-secondary float-left">Example Button floated left</button>
|
|
|
35 |
<button type="button" class="btn btn-secondary float-right">Example Button floated right</button>
|
|
|
36 |
</div>
|
|
|
37 |
{{< /example >}}
|