[ipfire.org.git] / src / scss / bootstrap-4.0.0-alpha.6 / docs / utilities / clearfix.md

---
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
@mixin clearfix() {
  &::after {
    display: block;
    content: "";
    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 float-left">Example Button floated left</button>
  <button class="btn btn-secondary float-right">Example Button floated right</button>
</div>
{% endexample %}
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 %}