Clearfix
Clear floated content within a container with the clearfix utility.
Contents
Overview
Easily clear float
s by adding .clearfix
to the parent element. A detailed explanation of how the clearfix works is available.
Usage
Can also be used as a mixin.
Example
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, as shown in the second part of the example.
.clearfix
.clearfix
SASS Reference
Variables
The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.
Name | Type | Default | Description |
---|---|---|---|
$enable-utility-clearfix |
boolean | true |
Enable the generation of the clearfix utility class. |
Mixins
Here are the mixins related to this grouping of utility classes that we use to help generate our CSS. You can also uses these mixins to generate your own custom components or utilities.
clearfix
Apply a clearfix to an element.
clearfix-disable
Disable the clearfix on an element.